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

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>

这就是我所做的:

1. 单击“父项”可查看两个数字的增加

2. 然后单击“子项”即可看到第二个数字增加了一次

3. 返回单击“Parent”仅查看第一个增加的数字

4. 最后再次单击“子项”即可看到它从父项编号开始，并再次增加一次

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

Answer 1

原型(prototype)继承就是原因

如果您的问题是了解 Angular 如何决定创建新的子作用域变量，那么您应该阅读

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

改变

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

至

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

您不需要尝试使用 $parent 访问父级 $scope。