{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Explosion°爆炸 的问题《Does ng-init watch over change on instantiated pro》','https://www.manongdao.com/q-353328.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
Does ng-init watch over change on instantiated property like ng-model does?
Apparently not, so I set a watch as shown below:
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.$watch('myProp1', function(newVal, oldVal){
$scope.myProp1 = newVal
})
});
html
<body ng-controller="MainCtrl">
<input ng-init='myProp="my property"'>{{myProp}}</br>
<input ng-init='myProp1="my 1 property"'>{{myProp1}}</br>
<input ng-init='myProp11="my 11 property"' ng-model='myProp11'>{{myProp11}}
Here is plnkr
- Does ng-init watch over change on instantiated property like ng-model does?
- How do I watch the changes in the property instantiated by ng-init?
- What's wrong with the $watch function above?
No, It is only to initialize a property on the scope. I would recommend not to use it. Markup is not for variable initialization, you should do it in your controller as much as possible.
You can watch just like watching any other property, but watching it does not mean that watch will get triggered. Watches are triggered only during the digest cycle and digest cycle gets invoked only if angular has something to do with a particular action.
Your watch on
prop1will never get executed (after ng Init initialization), because you are never changing the model value since there is no ngModel bound to it. And there is no angular action is done on the element and hence digest cycle will not happen.As an example just attach a keyup event on the element, and assign the value of input to the property
myProp, because you have registered keyup handler it will trigger digest cycle after the handler is run, and you will see the the watch getting executed and binding getting updatedplnkr