Javascript-форум (https://javascript.ru/forum/)
-   Angular.js (https://javascript.ru/forum/angular/)
-   -   вопрос по видимости переменных. (https://javascript.ru/forum/angular/42533-vopros-po-vidimosti-peremennykh.html)

yiooxir 30.10.2013 22:24

вопрос по видимости переменных.
 
Привет всем, вопрос к профи:
объясните начинающему, в чем фишка такого примера:

<div ng-app="">

<input type='text', ng-model='data'>
<span>{{data}}</span>

<div ng-controller='Ctrl'>
<input type='text', ng-model='data'>
<span>{{data}}</span>
</div>
</div>

function Ctrl($scope){}

песочница:http://learn.javascript.ru/play/Hupu1b

вводим в первый input - заполняются и первый и второй вывод, вводим во второй - второй получает свою data, т.е. первый уже не заполняется.
При этом, если использовать вместо data переменную через точку, к примеру data.message, то второй инпут после ввода уже не получает изолированную переменную data.message
?

И еще сразу вопрос в догонку №2
К примеру я хочу, чтобы все элементы с классом my обрабатывались моей функцией на js с вызовом по click. Вообще, все что имеет класс my, где бы, в каком окружении angular оно не появилось, при щелчке бы вызывало исполнение моей функции. Хотя бы чисто описательно подскажите, как это делать правильно на angular ? Я просто еще не совсем разобрался с областями видимости и т.п.

DjDiablo 31.10.2013 02:31

Все очень просто. И дальше куча текста такая :)
controller имеет дочерний scope от scope ngApp, а scope ngApp дочерний от scoope root.

Причем scope в самом прямом смысле дочерний, так как ссылка на родительский scope хранится в прототипе.

Теперь вспомним как работают прототипы.
1)Если есть объект но в нем нет переменной data то при попытки получить data мы получим undefined
2)Если есть объект но в нем есть переменная data то мы получим значение
3)Если есть объект и в нем нет переменной data, но она есть в прототипе то при запросе мы получим data из прототипа.
4) Если есть объект и в нем есть переменная data, и она есть в придачу в прототипе то при запросе мы получим data из объекта а не из прототипа.

В случае 1,2,3, и4 , при попытки записать в обьект значение data оно запишется не в прототип а в объект.

Так как scope это тоже обьект где в протопе родительский scope, то естественно scope ведет себя так как и положено объектам с прототипным наследованием.

watch слушает переменную data в контроле, но ведь в scope контрола ты ее не обьявлял а это значит она берется из прототипа. А в прототипе у нас scope ngApp как помнишь. Поэтому когда ты меняешь переменную data в scope ngApp, то watch контролера реагирует так будто это изменилась data в его собственном scope. Иными словами watch слушает не переменную в scope а переменную в прототипе. Но как только ты запишеш в scope контрола значение для переменной data, то watch будет слушать только data в scope а не спускаться вниз по цепочке прототипов.

Вот именно поэтому когда ты меняешь верхнее поле то нижнее реагирует тоже, но как только ты меняешь нижнее поле то нижнее перестает реагировать на верхнее и существует само по себе. Ведь у скопа контролла есть теперь своя переменная data и искать значение для data в прототипе интерпретатору нет надобности.

Иными словами scope ведет себя так же как и объект с прототипным наследованием, наверно оттого что он и есть объект с прототипным наследованием :)

Я объяснил как сумел )))

Про объект.
data.message это объект data у которого есть свойство message. Это означает что устанавливая значение message ты устанавливаешь ее в объекте на который ссылается свойство data в scope ngApp. Иными словами watch контрола опять находит data в прототипе. И от того что ты добавляешь или меняешь свойство в объекте data никакие изменения в scope контролла не произойдут и data будет общей для ngApp и controller. Это по прежнему типичное поведение объектов с прототипным наследованием.

По второму вопросу.
Сделай директиву которая вешается на класс my и в директиве можеш вытворять все что угодно с элементом этого класса. Хочешь события мыши слушай, а хочешь волчком вращай :)

yiooxir 31.10.2013 11:27

Спасибо огромнейшее !!!! теперь в моей голове полное прояснение по этому вопросу :victory:

nerv_ 31.10.2013 12:37

AngularJS Video Tutorial: The Dot


Часовой пояс GMT +3, время: 04:13.