html - Understanding scope in directive's childs -
i'm trying understand "scopes" in agularjs , can't understand following piece of code:
html:
<body ng-app="mymodule"> <div ng-controller="myctrl"> <my-component> <h2>attribute</h2> {{isolatedattributefoo}} </my-component> <my-component> <h2>attribute</h2> {{isolatedattributefoo}} </my-component> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="app.js"></script> angularjs:
var mymodule = angular.module('mymodule', []) .directive('mycomponent', function () { return { restrict:'e', scope:{} }; }) .controller('myctrl', ['$scope', function ($scope) { $scope.isolatedattributefoo = 'hello!'; }]); as can see simple test. far know (from this example), childs of directive (in example, elements inside "my-component") inherit scope directive and, since "my-component" scope isolated, "isolatedattributefoo" variable should not take value "isolatedattributefoo" variable @ controller... does. why? misunderstanding something?
if want try it, here fiddle.
you can isolate scope when include template or templateurl in directive definition. other wise inherit parent , view won't recognize changes scope made in link or controller of directive
try following:
html
<my-component></my-component> js
.directive('mycomponent', function () { return { restrict:'e', template: ' <h2>attribute</h2>{{isolatedattributefoo}}', scope:{}, link:function(scope){ scope.isolatedattributefoo = 'good bye!'; } }; });
Comments
Post a Comment