angularjs - Directive inner content with isolated and non-isolated scopes -
i found quite strange behaviour of scope:true type inner content of directive:
<body ng-init="x=10"> <mydir> {{x}} </mydir> </body>
so {{x}} inner content, , directive definition is:
.directive('mydir', function() { return { scope: {}, link: function(scope){ scope.x = 5; } }; });
when define scope isolated (scope:{}), outputs {{x}} 10, uses outer scope. when create new scope directive(scope:true), use inner content , output 5. uses different scopes inner content 2 cases. give me hint/link souce code/manual explanation inconsistency?
here plnk play code.
upd: understand javascript prototype inheritance. know difference between directive scope types. , aim not display 5 instead of 10. question inner template in both cases should interpolated parent scope, not have access properties of child/isolated one.
in original code snippet, {{x}}
not belong <mydir>
. should define template directive.
// js .directive('mydir', function() { return { template: '{{x}}', scope: {}, link: function(scope){ scope.x = 5; } }; }); // html <body ng-init="x=10"> <mydir></mydir> </body>
here the preview
Comments
Post a Comment