В javascript все обьекты передаются по ссылке и отследить их изменние непростая задача (даже с Object.define)
Как с этим справится angular?
Я очень подло засунул значение в обьект hihi, тот в свою очередь в haha, а тот в hello. короче получилось
hello.haha.hihi.hello="main"
Печалька но ангуляр несправился.
измененения публикуются, но публикуются только благодаря $apply
$watch срабатывает только при первом запуске, $watch попросту не в состоянии отследить изменения в обьекте.
Если бы он мог отследить то заполнялся бы log, а лог пуст.
Так же стоит обратить внимание что кликать на всё что ниже t4 бесполезно, это потому что hello2=undefined соответственно писать hello.бла бесполезно. В консоли мы увидим
Cannot read property 'haha' of undefined
Может watchCollection попробывать ?
Увы болт !
watchCollection тоже неможет отследить такую глубокую вложенность. Хотя для отслеживания массива вполне годен.
Короче чуда не произошло. Ну и фиг с ним, и так круто в конце концов watchCollection сможет отслеживать измениния в обьекте или в массиве, а без отслеживания обьектов в обьекте мы как нибудь проживём. К тому же watch или watchCollection всегда можно выставить на интерисующие свойство.
<!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={
haha:{
hihi:{
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.haha.hihi.hello=$attrs['name'] ;
//alert($scope.hello2);
//сбросим лог
$scope.log=[];
//опубликуем изменения
$scope.$apply();
//предотвратим всплытие
e.stopPropagation();
});
$scope.$watch ('hello2', function(){
$scope.log.push($attrs['name']);
});
$scope.$watchCollection('hello2',function(){
$scope.log.push( $attrs['name'] );
});
// Заремариный код будет работать, так как он отслеживает значение а не обьект
//$scope.$watch ('hello2.haha.hihi.hello', 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>