Angular中的$watch可以监听属性值的变化,然后并做出相应处理。
常见用法:
$scope@H_403_6@.$watch@H_403_6@("person"@H_403_6@,function@H_403_6@(n,o)@H_403_6@{@H_403_6@
//todo something...@H_403_6@
})
但是对于一个对象中的某个属性值变化时,$watch似乎不管用了。
示例代码:
<body@H_403_6@>@H_403_6@ <div@H_403_6@ ng-controller@H_403_6@="mainCtrl"@H_403_6@>@H_403_6@ <input@H_403_6@ id@H_403_6@="myText"@H_403_6@ type@H_403_6@="text"@H_403_6@ ng-model@H_403_6@="person.name"@H_403_6@/>@H_403_6@ <h2@H_403_6@>@H_403_6@@H_403_6@{{person@H_403_6@}}@H_403_6@</h2@H_403_6@>@H_403_6@ <h2@H_403_6@>@H_403_6@Status: @H_403_6@{{status@H_403_6@}}@H_403_6@</h2@H_403_6@>@H_403_6@ </div@H_403_6@>@H_403_6@ <script@H_403_6@>@H_403_6@ angular.module('myApp'@H_403_6@,[]) .controller('mainCtrl'@H_403_6@,function@H_403_6@ ($scope)@H_403_6@ {@H_403_6@ $scope.person = { name:"allen"@H_403_6@,age:21@H_403_6@ } $scope.$watch("person"@H_403_6@,o)@H_403_6@{@H_403_6@ //取消第一次加载时的监听响应@H_403_6@ if@H_403_6@(n == o){ return@H_403_6@; } $scope.status = "changed"@H_403_6@ }) }) @H_403_6@</script@H_403_6@>@H_403_6@ </body@H_403_6@>@H_403_6@@H_403_6@
我们为输入框绑定了person对象的name属性,然而当我们改变输入框的值时候,{{person}}确实改变了,然而并没有出现我们想要的change字符。
效果:
我们需要为$watch方法额外添加一个true参数,使之达到我们想要的效果:
$scope@H_403_6@.$watch@H_403_6@("person"@H_403_6@,o)@H_403_6@{@H_403_6@
if@H_403_6@(n == o){
return@H_403_6@;
}
$scope@H_403_6@.status = "changed"@H_403_6@;
},true@H_403_6@)
$watch方法完整的使用方式是这样的:
$watch@H_403_6@(watchExpression@H_403_6@,[listener]@H_403_6@,[objectEquality]@H_403_6@);
第一个是监听的参数名称,剩下两个可选参数分别为处理函数和是相等比较的方式,对于后者文档如是说:Compare for object equality using angular.equals instead of comparing for reference equality.
即是否使用angular.equals方法进行比较。
如此效果变为:
此文档的作者:justforuse
Github Pages:justforuse