Scoping scope (Mini-challenge 2) Answer

Table of Content

 

Check out Mini-challenge 2 Instructions

Answer:

To scoping the scope and avoid this behavior, one solution is to create an object inside the scope instead of call the property scoping scopedirectly from the scope, like this: $scope.obj.myProp (see code below).

 

myApp.controller('navCtrl', function ($scope) {
    $scope.obj = {};
});

 
In the view:

<div ng-controller="navCtrl">
   <div>navCtrl text: {{obj.name}}</div>
   <div ng-controller="loginCtrl">
        <div> loginCtrl text: {{obj.name}}</div>
       <br/>
        <input ng-model="obj.name"></input>
   </div>
</div>

 

Here are other recommendations and references.:

https://www.airpair.com/angularjs/posts/top-10-mistakes-angularjs-developers-make#8-scoping-scope-s
You can find more information about the angularjs scope and the Prototypal Inheritance here.
https://github.com/angular/angular.js/wiki/Understanding-Scopes

If you have a solution for this challenge, different from the proposal solution on this post, don't be shy and share it with us. 🙂