Javascript 将子范围变量与父范围变量同步

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

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++;
  }
})

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 }}</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>

 <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>

{{aaa}}

{{aaa}}

这就是我所做的：

单击“父项”以查看这两个数字都增加了

然后单击Child以查看第二个数字增加一次

返回单击“父项”仅查看增加的第一个数字

最后再次单击“子项”以查看它从父项编号开始，然后再次增加一次

---

我的问题是：在不使用服务的情况下，是否有办法始终确保子范围的变量与父范围的变量相同？看起来我的赋值

$scope.aaa=$scope.$parent.aaa

并不总是有效。

我有一种方法可以确保子作用域的变量与父作用域的变量相同：使用对象，以便它们使用相同的引用

我做了一些更改，您可以使用：

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++;
  }
})

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 }}</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>

 <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>

{{aaa.a}
//这里。
{{aaa.a}
//这里。

我有一种方法可以始终确保子作用域的变量与父作用域的变量相同：使用对象，以便它们使用相同的引用

我做了一些更改，您可以使用：

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++;
  }
})

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 }}</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>

 <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>

{{aaa.a}
//这里。
{{aaa.a}
//这里。

原型继承是原因

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

改变

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

到

---

您不需要尝试使用

$parent访问父
$scope
。

原型继承是原因

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

改变

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

到

---

您不需要尝试使用

$parent访问父级
$scope
。

这就是原型继承在JS中的工作方式。 考虑这一点：（试着在Chrome／Firefox控制台上逐行运行下面的代码）

---

这也解释了为什么一旦在plnkr中按下“子按钮”，然后按下“父按钮”，它将不再更新子值。

这就是原型继承在JS中的工作方式。 考虑这一点：（试着在Chrome／Firefox控制台上逐行运行下面的代码）

---

这也解释了为什么一旦您在plnkr中按下“子按钮”，然后按下“父按钮”，它将不再更新子值。

$scope.aaa=$scope.$parent.aaa

仅当它是阵列时有效。您想做什么？如果您希望始终使用父级的

aaa

变量，则不要在子控制器中定义变量。我建议您通过引用绑定。将“.”放在模型的作用域上。

$scope.aaa=$scope.$parent.aaa

仅当它是数组时才有效。您想做什么？如果您希望始终使用父级的

aaa

变量，则不要在子控制器中定义变量。我建议您通过引用绑定。在模型的作用域中添加“.”。您可以在此处阅读有关原型继承的更多信息：您可以在此处阅读有关原型继承的更多信息：