CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scope
Tarun Dugar
Tarun Dugar

Reputation: 8971

Difference between child and isolated scopes in directives

I was trying to understand scopes in AngularJS directives. From what I gather there are three types:

  1. scope inherited from parent controller
  2. child scope (scope: true)
  3. isolated scope (scope: {})

I understand the first one. The second one, 'child scope' is defined as:

scope prototypically inherited from the parent controller

and 'isolated scope' is defined as

scope specific to the directive and not inherited from the parent controller

In layman terms, what exactly is the difference between 'child scope' and 'isolated scope'? What are their respective use cases?

Upvotes: 4

Views: 2925

Answers (3)

Chandermani
Chandermani

Reputation: 42669

With respect to the type of scope to use, here are some of the guiding principles i follow. This knowledge also stem looking an number of Angular and third party directives

Use the parent scope if you just need to add some behaviour to existing DOM elements, ng-click, ng-show, ng-class are good examples of it. These directives do not come with their own template UI but just extend behaviour of exiting html elements.

Use scope:true, or a child scope when your directive plans to add new properties on the scope and do not want to pollute the parent scope with such properties. Very few Angular directive do it, ng-repeat creates a child scope for each iterated element and exposes some properties on the child scope like $index. I would suggest when creating directives at least create this.

Isolated scope created using scope:{} are used by true components where input to the directive is explicit through scope property and is not affect by parent scope directly. This helps us create a truely self contained reusable directive. There are some challenges with isolated directive such as two isolated directives cannot be applied on same html element, that you need to be aware of.

Regarding the nuances of scope inheritance, you have to read https://github.com/angular/angular.js/wiki/Understanding-Scopes there is no way out.

Hope it helps.

Upvotes: 4

charlietfl
charlietfl

Reputation: 171679

Simplest way to look at isolated scope would probably be to look at 2 instances of the same directive

<div ng-controller="someController">
    <my-directive>
      <input ng-model ="user.name">
      {{ user.name}}
    </my-directive>
    <my-directive>
      <input ng-model ="user.name">
      {{ user.name}}
    </my-directive>
</div>

Without isolated scope user.name would be in the parent scope. Changing the input in either instance would therefore change it in the other instance as well , since they both reference the same variable

When scope is isolated, each instance would have it's own value for user.name and changes in one instance won't affect the other instance

Upvotes: 1

Ararat Harutyunyan
Ararat Harutyunyan

Reputation: 926

When scope is set to "true", AngularJS will create a new scope by inheriting parent scope.

When scope is set to "false" (or nothing is set), the controller and directive are using the same scope object.

When scope: {}, directive gets a new isolated scope.

Details can be found here.

Upvotes: 1

Related Questions