Sync child scope var with parent var

问题

I have a question about how angular decides to create new child scope variable.

http://plnkr.co/edit/Dlsh6WJA1hrCpBgm5IrI?p=preview

JS

angular.module('myapp', [])

.controller('HomeCtrl', function($scope) {
  $scope.aaa = 10;
    $scope.clickMe2 = function() {
    $scope.aaa++;
  }
})

.controller('TestCtrl', function($scope) {

  $scope.clickMe1 = function() {
    $scope.aaa = $scope.$parent.aaa || 9;
    $scope.aaa++;
  }
})

HTML

  <div ng-controller="HomeCtrl">
    <p>{{ aaa }}</p>
    <a ng-click="clickMe2()" href="">Click Parent</a>
    <div ng-controller="TestCtrl" style="padding-left:20px;">
      <p>{{ aaa }}</p>
      <a ng-click="clickMe1()" href="">Click Child</a>
    </div>
  </div>

This is what I did:

1. Click Parent to see both numbers increased

2. Then Click Child to see the second number increased ONCE

3. Go back Click Parent to see only the first number increased

4. Finally Click Child again to see it started from the parent number and again, increased ONCE

My question: Without using services, is there a way to always ensure the child scope's variable IS the same as the parent scope's variable? Look like my assignment $scope.aaa = $scope.$parent.aaa doesn't work all the times.

回答1:

I have a way to always ensure the child scope's variable IS the same as the parent scope's variable: use Object so they use the same reference.

I have made some changes, you can use:

JS

angular.module('myapp', [])

.controller('HomeCtrl', function($scope) {
  $scope.aaa = {a:10}; //change here.
    $scope.clickMe2 = function() {
    $scope.aaa.a++; //here.
  }
})

.controller('TestCtrl', function($scope) {

  $scope.clickMe1 = function() {
    $scope.aaa.a = $scope.$parent.aaa.a || 9; //here.
    $scope.aaa.a++; //here.
  }
})

HTML

 <div ng-controller="HomeCtrl">
    <p>{{ aaa.a }}</p> //here.
    <a ng-click="clickMe2()" href="">Click Parent</a>
    <div ng-controller="TestCtrl" style="padding-left:20px;">
      <p>{{ aaa.a }}</p> //and here.
      <a ng-click="clickMe1()" href="">Click Child</a>
    </div>
  </div>

回答2:

Prototypal Inheritance is the reason

If your question is to understand how angular decides to create new child scope variable, then you should read

https://github.com/angular/angular.js/wiki/Understanding-Scopes

Changing

$scope.aaa = 10;
$scope.aaa++;

to

$scope.aaa = {value:10};
$scope.aaa.value++;

You do not need to try to access the parent $scope using $parent.

回答3:

This is how prototypal inheritance works in JS. Consider this: (Try running the code below in chrome/Firefox console line-by-line.)

var parent = {a:1};
var child = {};  // there is no property 'a' in child

child.__proto__ = parent  // this is essentially what happens when child scope 
                         // inherits parent scope in angular

child.a; //=> 1, gets this from the __proto__ object
child.__proto__;  //=> {a:1}


parent.a = 2;
child.a; //=> 2 
child.__proto__;  //=> {a:2}


child.a = 3; //creates a property 'a' on child object
parent.a // => 2
child.a // =>3, not being accessed from __proto__
child.__proto__; // {a:2}

// In fact, now if you update the value on parent it won't show up in child
parent.a = 4;
child.a; // => 3, not updated
child.__proto__; // => {a:4} , updated

That also explains why once you press the "child button" in your plnkr, and then press the "parent button", it will no longer update the child value.

来源：https://stackoverflow.com/questions/29160182/sync-child-scope-var-with-parent-var