This is from angular doc about ng-init.
The ngInit directive allows you to evaluate an expression in the current scope.
But if I use ng-init along with custom directive, and the directive use different scope difinition, the variable by ng-init will have different scope.
<body ng-app="transcludeScope" ng-init="test='test'">
<div truescope ng-init="test2='test2'">Transcluded:<p>test: {{test}}</p><p>test2: {{test2}}</p><p>test3: {{test3}}</p></div>
<hr>
<div isolatescope ng-init="test3='test3'">Transcluded:<p>test: {{test}}</p><p>test2: {{test2}}</p><p>test3: {{test3}}</p></div>
</div>
</body>
angular.module('transcludeScope', [])
.directive('truescope', function() {
return {
transclude: true,
scope: true,
template: "<p>test: {{test}}</p><p>test2: {{test2}}</p><div ng-transclude></div>"
}
})
.directive('isolatescope', function() {
return {
transclude: true,
scope: {},
template: "<p>test: {{test}}</p><p>test3: {{test3}}</p><div ng-transclude></div>"
}
});
From the result, test2 is only available inside directive while test3 is available whole app.
can anyone explain their behavior? Thanks :-)
