CODEWITHSUNDEEP
angularjs
jcubic
jcubic

Reputation: 66590

What is the difference between scope:{} and scope:true inside directive?

I can't find this information about Angular.js and I notice while I was working that those two values work differently. What's the difference?

.directive('foo', function() {

  return {
    scope: true
  };
});

.directive('foo', function() {

  return {
    scope: {}
  };
});

Upvotes: 43

Views: 30248

Answers (5)

Jitender Bhalla
Jitender Bhalla

Reputation: 471

scope : true

Angular JS will create a new scope by inheriting parent scope ( usually controller scope, else application’s root Scope ).

Note : Any changes made to this new scope will not reflect back to the parent scope. However, since the new scope is inherited from the parent scope, any changes made in the parent scope i.e. controller will be reflected in the directive scope.

scope : false

The controller and directive are using the same scope object. This means any changes to the controller or directive will be in sync.

scope : {}

New scope created for the directive, but it will not be inherited from the parent scope. This new scope also known as Isolated scope because it is completely detached from its parent scope.

Upvotes: 35

Chris Halcrow
Chris Halcrow

Reputation: 31960

The 'scope' declaration in an AngularJS directive is a property of the 'Directive Definition Object', which is what's actually being returned by directive function that you define. The options for 'scope' are documented in the official angular documentation for a Directive Definition Object:

https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object

Here's the explanation taken directly from the documentation:

scope

The scope property can be false, true, or an object:

false (default): No scope will be created for the directive. The directive will use its parent's scope.

true: A new child scope that prototypically inherits from its parent will be created for the directive's element. If multiple directives on the same element request a new scope, only one new scope is created.

{...} (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.

Upvotes: 2

guru
guru

Reputation: 4022

Both scope: true and scope:{} will create a child scope for the directive. But,

scope:true will prototypically inherit the properties from the parent(say the controller where the directive comes under) where as scope:{} will not inherit the properties from the parent and hence called isolated

For instance lets say we have a controller c1 and two directives d1 and d2,

app.controller('c1', function($scope){
  $scope.prop = "some value";
});

.directive('d1', function() {
  return {
    scope: true
  };
});

.directive('d2', function() {
  return {
    scope: {}
  };
});

<div ng-controller="c1">
  <d1><d1>
  <d2><d2>
</div>

d1(scope:true) will have access to c1 scope -> prop where as d2 is isolated from the c1 scope.

Note 1: Both d1 and d2 will create a new scope for each directive defined.

Note 2: Apart from the difference between the two, for scope:true - Any changes made to the new child scope will not reflect back to the parent scope. However, since the new scope is inherited from the parent scope, any changes made in the c1 scope(the parent scope) will be reflected in the directive scope.

Tip: Use scope:{} or isolated scope for reusable angular directives. So that you won't end up messing with the parent scope properties

Upvotes: 58

cuttlas
cuttlas

Reputation: 981

scope: true creates a new scope for the directive that inherits everything from the parents

scope : {} also creates a new scope for the directive, but it's isolated, so it doesn't inherit anything from the parents

Take a look a this article:

http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/

Upvotes: 4

nicael
nicael

Reputation: 19005

scope: true creates a scope that is not isolated from the parents scope, it inherits from the parents scope, while scope: {} creates a scope isolated from the parent.

Upvotes: 3

Related Questions