user2686744
user2686744

Reputation:

is ng-scope inserted only for new scopes?

This may sound kinda dumb .. But I have problems understanding if the 'ng-scope' class is inserted only when a new scope is created, or is it something else ?

Example : I have these lines of code linked to a controller :

<button class="btn" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>

In the web console, both have an ng-scope :

<button class="btn ng-scope" ng-click="open()">Open me!</button>
<div ng-show="selected" class="ng-scope ng-binding ng-hide">Selection from a modal: </div>

Even when there is no angular-specific data, like here, it will add an ng-scope :

<div>hello</div>

outputs

<div class="ng-scope">hello</div>

But why ??

Upvotes: 16

Views: 42065

Answers (2)

MechaCode
MechaCode

Reputation: 195

whenever we specify dependency injection at the time of creating angular module

(angular.module('myApp',[]);)

, then only class="ng-class" will get added to <body ng-app="myApp "ng-controller="myCtrl" class="ng-class">. If we don't specify DI (angular.module('myApp');) then class="ng-class" will not get added. This is in case of <body> element. But except <body> element, class="ng-scope" will get added whenever we write ng-controller directive for any html element/tag. Eg. <div ng-controller="myDiv"></div>. The output is <div class="ng-scope"></div>

Upvotes: -1

Davin Tryon
Davin Tryon

Reputation: 67296

Any place there is a scope attached. From the documentation:

Notice that Angular automatically places ng-scope class on elements where scopes are attached. The definition in this example highlights in red the new scope locations. The child scopes are necessary because the repeater evaluates {{name}} expression, but depending on which scope the expression is evaluated it produces different result.

And in this answer, @MarkRajcok indicates that angular uses these to track scopes (and garbage collect).

EDIT: And to answer your edited question. No, this does not add an ng-scope class:

<div>hello</div>

Here is a plunker to see this in action.

Notice how ng-scope class is only applied to the node where ng-controller is declared.

<div ng-controller="Ctrl" class="ng-scope">
  <div>hello2</div>
</div>

Upvotes: 13

Related Questions