Question

我有一个关于角度如何决定创建新的子范围变量的问题。

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>

这就是我所做的：

单击“父级”以查看两个数字都增加
然后单击子项以查看第二个数字增加ONCE
返回单击“父级”以仅查看第一个增加的数字
最后再次单击“儿童”以查看它从父母编号开始，然后再次增加“增加”

我的问题：如果不使用服务，是否有办法始终确保子范围的变量IS与父范围的变量相同？看起来我的作业$scope.aaa = $scope.$parent.aaa并不是一直有效。

Answer 1

Prototypal Inheritance是原因

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

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

更改

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

到

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

您无需尝试使用$scope

访问父$parent.

Answer 2

我有办法始终确保子范围的变量IS与父范围的变量相同：使用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 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中的“子按钮”，然后按“父按钮”，它将不再更新子值。

将子范围var与父var同步

3 个答案: