Not allowed to isolate scope AngularJS
I mean AngularJS tutorial material and tried to implement "Isolated Scope Directive" but it doesn't work. Below you will find the given code snippets.
HTML:
<body ng-app="myApp">
<div ng-init="myProperty = 'wow, this is cool'">
Surrounding scope: {{ myProperty }}
<div my-inherit-scope-directive>
Inside an directive with inherited scope: {{ myProperty }}
</div>
<div my-directive>
Inside myDirective, isolate scope: {{ myProperty }}
<div>
</div>
</body>
JS:
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
return {
restrict: 'A',
scope: {}
};
});
app.directive('myInheritScopeDirective', function() {
return {
restrict: 'A',
scope: true
};
});
Angular JS:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js"></script>
Actual output:
Surrounding scope: wow, this is cool
Inside an directive with inherited scope: wow, this is cool
Inside myDirective, isolate scope: wow, this is cool
Expected Result:
Surrounding scope: wow, this is cool
Inside an directive with inherited scope: wow, this is cool
Inside myDirective, isolate scope:
The difference lies in the last line of outputs.
I agree, there are several questions with a similar title already on SO. I went through them, believe me, no one could answer my question. So, I thought about asking a question specific to my requirement.
source to share
According to Angular compile.js
docs comment (for scope
directive attribute )
{...}
(object hash): A new Isolation area is created for the directive template. The "isolate" scope differs from the normal scope in that it is not prototypically inherited from the parent scope. This is useful when creating reusable components that should not accidentally read or modify data in the parent area. Note that a marquee directive withouttemplate
ortemplateUrl
will not apply a marquee to its children.
And here you don't have a template
/ templateUrl
, so it works just like that.
Here's your working example with a template
Edit . There's a closed github issue regarding this here , which explains the reason . >:
Comment by gkalpak
In reality, it is not a good practice to rely on internals based on components from HTML (i.e. have DOM children that assume certain things about the directive for their parent) - if the content is component specific, they support in it template.
This sounds reasonable in this respect.
Edit 2 : This was introduced as a part Angular@1.2.0 timely-delivery (2013-11-08)
, hence it still works in versions before that.
By CHANGELOG : ( v1.2.0 Breaking changes)
$ compile
- due to d0efd5ee , children that are defined in either the application template or some other directive template do not get scope isolation. In theory, nobody should rely on this behavior, as it is very rare - in most cases the isolate directive has a pattern.
source to share