AngularJS directive isolated scope is not working

Question

I'm referring an AngularJS study material and tried to implement "Directive with Isolated scope", but it's not working. Please find below given pieces of code, I've done.

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 Output:

Surrounding scope: wow, this is cool
Inside an directive with inherited scope: wow, this is cool
Inside myDirective, isolate scope:

Difference lies in last line of outputs.

I agree, several questions with resembling title are already present on SO. I've been through them, believe me, none could answer my query. So, thought about asking question specific to my requirement.

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

As per Angular's compile.js docs comment, (for scope attribute of a directive)

{...} (an object hash): A new "isolate" scope is created for the directive's template. The 'isolate' scope differs from normal scope in that it does not prototypically inherit from its parent scope. This is useful when creating reusable components, which should not accidentally read or modify data in the parent scope. Note that an isolate scope directive without a template or templateUrl will not apply the isolate scope to its children elements.

And, here you don't have template/templateUrl so it works that way.

Here's your working example with template

Edit: Here's a closed github issue regarding this which explains the why part:

A comment by gkalpak

Indeed it doesn't sound like a good practice to rely on a component-directive's internals from the HTML (i.e. have child DOM elements that assume certain things about a directive on their parent) - if the contents are specific to a component, they belond in it's template.

In that respect, it does sounds reasonable.

Edit 2: This was introduced as part of [email protected] timely-delivery (2013-11-08) hence it works anyway in the versions before that.

As per CHANGELOG: (v1.2.0 Breaking Changes)

$compile:

due to d0efd5ee, Child elements that are defined either in the application template or in some other directives template do not get the isolate scope. In theory, nobody should rely on this behavior, as it is very rare - in most cases the isolate directive has a template.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 27, 2017 at 9:57

tanmay

7,9112 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Gautam G Over a year ago

thank you for your response, it does show your research & efforts in answering this question. But, there's still one thing that I couldn't figure out & would like you to go through once. Please refer: isolate scope

tanmay Over a year ago

@GGArora basically you were using Angular 1.2.0-rc.3 which was before 1.2.0 where these changes got introduced first :) updated answer with that.

tanmay Over a year ago

@GGArora you got it?

Gautam G Over a year ago

Well I guess, that's fine.

Collectives™ on Stack Overflow

AngularJS directive isolated scope is not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related