将子作用域变量与父变量同步

Question

我对 angular 如何决定创建新的子作用域变量有疑问。

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>

这是我做的：

单击父项可看到两个数字都增加了
然后点击Child可以看到第二个数字增加了一次
返回点击父级只看到增加的第一个数字
最后再次点击Child，可以看到它是从父号开始，增加一次

我的问题：在不使用服务的情况下，有没有办法始终确保子作用域的变量与父作用域的变量相同？看来我的作业 $scope.aaa = $scope.$parent.aaa 并不总是有效。

Answer 1

我有办法始终确保子作用域的变量与父作用域的变量相同：使用 Object，以便它们使用相同的引用。

我做了一些改动，你可以使用：

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>

Answer 2

原型继承是原因

如果您的问题是了解 angular 如何决定创建新的子范围变量，那么您应该阅读

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

改变

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

到

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

您无需尝试使用 $parent.

访问父 $scope

Answer 3

这就是原型继承在 JS 中的工作原理。考虑一下：（在 chrome/Firefox 控制台中逐行尝试运行下面的代码。）

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

这也解释了为什么一旦您在 plnkr 中按下 "child button"，然后按下 "parent button"，它将不再更新子值。

将子作用域变量与父变量同步

Sync child scope var with parent var

javascript

angularjs

angularjs-scope