Angular Directive Constructor Bug?
Why is MyElement1's constructor called twice by the myElement1 directive?
HTML
<script src="http://code.angularjs.org/angular-1.0.0rc5.js"></script>
<script type="text/ng-template" id="cdn/myElement1.html">
<div>myElement1 constructor was called {{ numElementOne() }} times.</div>
</script>
<script type="text/ng-template" id="cdn/myElement2.html">
<div ng-controller="MyElement2">myElement2 constructor was called {{ numElementTwo() }} times.</div>
</script>
<my-element1></my-element1>
<hr />
<my-element2></my-element2>
JavaScript
var myApp = angular.module('myApp',[]);
myApp.directive('myElement1', function() {
return {
restrict: 'E',
replace: true,
link: MyElement1,
templateUrl: 'cdn/myElement1.html'
}
});
function MyElement1( $scope )
{
console.log( 'MyElement1' );
MyElement1.NUM_CONSTRUCTED++;
$scope.numElementOne = function() {
return MyElement1.NUM_CONSTRUCTED;
}
}
MyElement1.NUM_CONSTRUCTED = 0;
myApp.directive('myElement2', function() {
return {
restrict: 'E',
replace: true,
templateUrl: 'cdn/myElement2.html'
}
});
function MyElement2( $scope )
{
console.log( 'MyElement2' );
MyElement2.NUM_CONSTRUCTED++;
$scope.numElementTwo = function() {
return MyElement2.NUM_CONSTRUCTED;
}
}
MyElement2.NUM_CONSTRUCTED = 0;