Scope in Angularjs

Question

I was trying to understand scope in angularjs.

Say while registering a directive in angularjs if we dont provide any scope as the property of the object, what is the scope of the object then?

For example consider the following code:-

 app.directive("kid", function() {
 return {
restrict: "E",
template: '<input type="text" ng-model="chore"> {{chore}}'
  };
});

Now say if i have 2 elements in my html:-

  <kid></kid>
  <kid></kid>

So how do above end up sharing the same scope? I am not able to find convincing answer yet.

Pankaj Parkar · Accepted Answer · 2015-10-06 19:20:40Z

2

Yes, As you didn't declared any scope option of directive, it will share the same scope.

Here is Demo Plunkr

Now come to the point, what is scope object?

scope object in Angular is nothing having context information and that will available on html, can also be utilized to provide two way binding. Basically scope is binded with some controller.

When things comes to directive scope, if you didn't mention scope property inside directive, that means directive shares the scope of the controller where the directive element has been placed.

To make them treated as a different scope for each directive you could create an an directive with an isolated scope, which can be defined using scope: {} inside a directive, when you define a scope: {} inside a directive, it creates an isolated child scope which is not prototypically inherited from the parent scope using $scope.$new(true) method.

Plunkr with isolated scope

edited Oct 6, 2015 at 19:20

answered Oct 6, 2015 at 18:20

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

2 Comments

hally9k Over a year ago

It seems like you understand isolate scopes as a concept but your English leaves room for vast misinterpretation. Maybe reword this a bit more carefully.

hally9k Over a year ago

I did start to edit your answer but found myself rewriting it completely so I just added an answer of my own.

hally9k · Accepted Answer · 2015-10-06 19:24:23Z

1

Your question is about scope inheritance and isolate scope.

If you do declare a scope property on a directive object then the directive has its own isolate scope.

If you don't declare a scope property on your directive object the directive inherits the scope of the scope it was instantiated in.

So with your definition of the kid directive that doesn't declare an isolate scope the kid directives in the code example below both inherit the scope of the controller that they are instantiated in.

<div ng-controller="myCtrl">
     <kid></kid>
     <kid></kid> 
</div>

edited Oct 6, 2015 at 19:24

answered Oct 6, 2015 at 19:08

hally9k

2,5932 gold badges29 silver badges51 bronze badges

Comments

Reeno · Accepted Answer · 2016-03-14 18:07:30Z

Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events.

Scope characteristics

Scopes provide APIs ($watch) toenter image description here observe model mutations.
Scopes provide APIs ($apply) to propagate any model changes through the system into the view from outside of the “Angular realm” (controllers, services, Angular event handlers).
Scopes provide context against which expressions are evaluated.

For example {{username}} expression is meaningless, unless it is evaluated against a specific scope which defines the username property.Scope is the glue between application controller and the view.

Collectives™ on Stack Overflow

Scope in Angularjs

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related