Below is an example:
test.html
<!DOCTYPE html>
<html ng-app ng-controller="AppController">
<head>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="script1.js"></script>
</head>
<body>
<div ng-include="'test1.html'"></div>
{{testFn()}}
</body>
</html>
test1.html
<div>{{testFn()}}</div>
script1.js
function AppController($scope) {
$scope.testFn = function() {
console.log("TestFn");
return "test";
}
}
It seems that the testFn function is executing four times instead of the expected two logs in the console. Even after removing
<div ng-include="'test1.html'"></div>
, there are still two logs showing up. What am I doing wrong?
UPDATED:
angular.js
// added console.log to original code
var ngBindDirective = ngDirective(function(scope, element, attr) {
console.log("ngDirective", attr.ngBind);
element.addClass('ng-binding').data('$binding', attr.ngBind);
scope.$watch(attr.ngBind, function ngBindWatchAction(value) {
console.log("ngDirective - scope.$watch", value);
element.text(value == undefined ? '' : value);
});
});
test.html
<!DOCTYPE html>
<html ng-app ng-controller="AppController">
<head>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="script1.js"></script>
</head>
<body>
<div ng-bind="testFn()"></span>
</body>
</ html>
console
createInjector - modulesToLoad undefined angular.js:2666
loadModules undefined angular.js:2756
createInjector - modulesToLoad
["ng", Array[2]]
angular.js:2666
...
<output truncated for brevity>
...
---------------------------------------------
ngDirective testFn() angular.js:12363
TestFn script1.js:3
ngDirective - scope.$watch test angular.js:12366
TestFn script1.js:3