CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
Jose Ignacio Larghi
Jose Ignacio Larghi

Reputation: 488

AngularJS: ng-include and the scopes

Why if I can't set the value of $scope.myProperty of the controller ExampleCtrl from a html that inside of ng-include. But if I define $scope.myObj.myProperty and in the html I refer like ng-model="myObj.myProp" work fine?

Example: 

<div ng-app="MyApp">
    <div ng-controller='ExampleCtrl'>
        <div ng-include="'#inlcude'"></div>
        <!-- THIS DON'T WORK -->
        <p><b>myProperty:</b>{{myProperty}}</p>
        <!-- THIS WORK -->
        <p><b>myObj.myProperty:</b>{{myObj.myProperty}}</p>
    </div>
</div>    
<!-- INCLUDE HTML -->
<div id='include'>
    <input ng-model='myProperty' type='text' />
    <input ng-model='myObj.myProperty' type='text' />
</div>

I understand thet ng-include create a new scope, but why from the html of include I don't see an simple propety of your parent scope?

Thanks

Upvotes: 1

Views: 4178

Answers (1)

Mark Rajcok
Mark Rajcok

Reputation: 364687

When the input writes to myProperty it will (at that point) create a property on the child scope. This child scope property hides/shadows the parent property of the same name. Any changes the child makes will be made on the child scope property. The parent scope can not see this new, child scope property – it does not know that this other property exists. It will find its own property when {{myProperty}} is interpolated.

When the other input writes to myObj.myProperty, it follows the prototype chain and writes to the property on the parent scope.

For a much more detailed answer (with lots of pictures), see What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

Upvotes: 1

Related Questions