Menu
Code below (also in Plunker). On the console I see multiple foos getting printed.
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js'></script>
</head>
<body>
<div ng-app='theApp'>
<div ng-controller='TheController as ctl'>
{{ctl.foo()}}
</div>
</div>
<script>
angular.module('theApp', [])
.controller('TheController', [function() {
this.foo = function() {
console.log('foo');
};
}]);
</script>
</body>
</html>
708
Since your view expression is the result of a function call, the watch listener will invoke it multiple times to detect if the function result is stable. For comparison, see this fork of the example code, and note how the function foo is only called one time.
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js'></script>
</head>
<body>
<div ng-app='theApp'>
<div ng-controller='TheController as ctl'>
{{ctl.bar}}
</div>
</div>
<script>
angular.module('theApp', [])
.controller('TheController', [function() {
this.foo = function() {
console.log('foo');
return "foo";
};
this.bar = this.foo();
}]);
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
