Следуюший вопрос это порядок срабатывания watch в случае если scope изолирован. Чтобы было чему всплывать я сделаю связывание через аттрибут hello2
Как видно из опыта всплытие не происходит выше уровня родительского scope. Надо сказать такое поведение сперва здорово озадачивает. Но если вдуматься то scope ведь изолированный, и если hello обьявлен не в нём то он просто напросто недоступен. А если свойство недоступно то ангуляр создаёт это свойство. Вот поэтому (test4-1 test4-2 test4-3) и (test4-3-1 test4-3-2) имеют своё собственное значение, ведь у них свой собственной персональный hello
Зато всё прекрасно всплывает из (t6-1 и t6-2) всё дело в том что мы их подписали на hello2 который есть у t6, а в t6 hello2 связан с hello.
Что касается всплытия то вначале срабатывает watch кликнутого элемента, затем watch родителя, затем соседи кликнутого элемента, и потом переходим к родителю родителя, потом соседи родителя кликнутого элемента.
Если кто хочет знать моём мнение, то оно такое.
Scope сделан генеально !
<!doctype html>
<html ng-app="myApp">
<head>
<style>
test2{
padding-left:50px;
display:block;
}
</style>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script language="javascript" type="text/javascript">
//Обьявим модуль
var myApp=angular.module('myApp', []);
//создадим дерективу
myApp.directive('test',function(){
return {
restrict:"E",
scope:{},
controller:function($scope){
$scope.hello="main ";
$scope.log=[];
$scope.$watch ('hello', function(){
$scope.log.push('main');
});
}
}
});
//создадим дерективу
myApp.directive('test2',function(){
return {
restrict:"E",
scope:{
hello2:"=",
log:"="
},
controller:function($scope,$element,$attrs){
$element.bind('click',function(e){
$scope.hello2=$attrs['name'];
//alert($scope.hello2);
//сбросим лог
$scope.log=[];
//опубликуем изменения
$scope.$apply();
//предотвратим всплытие
e.stopPropagation();
})
$scope.$watch ('hello2', function(){
$scope.log.push($attrs['name']);
});
}
}
});
</script>
</head>
<body >
<h3> ClickZone </h3>
<test>
<test2 hello2="hello" log="log" name="t1">(click t1) hello2={{hello2}}</test2>
<test2 hello2="hello" log="log" name="t2">(click t2) hello2={{hello2}}</test2>
<test2 hello2="hello" log="log" name="t3">(click t3) hello2={{hello2}}</test2>
<test2 hello2="hello" log="log" name="t4">
<test2 hello2="hello" log="log" name="t4-1">(click t4-1) hello2={{hello2}}</test2>
<test2 hello2="hello" log="log" name="t4-2">(click t4-2) hello2={{hello2}}</test2>
<test2 hello2="hello" log="log" name="t4-3">(click t4-3) hello2={{hello2}}
<test2 hello2="hello" log="log" name="t4-3-1">(click t4-3-1) hello2={{hello2}}</test2>
<test2 hello2="hello" log="log" name="t4-3-2">(click t4-3-2) hello2={{hello2}}</test2>
</test2>
</test2>
<test2 log="log" hello2="hello" log="log" name="t5">(click t5) hello2={{hello2}}</test2>
<test2 log="log" hello2="hello" log="log" name="t6">(click t6) hello2={{hello2}}
<test2 hello2="hello2" log="log" name="t6-1">(click t6-1) hello2={{hello2}} (связка hello2->hello2->hello) </test2>
<test2 hello2="hello2" log="log" name="t6-2">(click t6-2) hello2={{hello2}} (связка hello2->hello2->hello) </test2>
</test2>
<br/><br/>
<h3> LogZone </h3>
{{log}}
<br/><br/>
<h3>hello= {{hello}} </h3>
</test>
</body>
</html>