作用域变量未从状态父控制器继承到子控制器

Question

我在Ionic Framework中执行此操作。 它以具有eventmenu.home状态的home.html模板开始。 $scope.aaa变量为10 ，可以正确显示该值。 但是，在该模板的子控制器TestCtrl中，我无法更改$scope.aaa值并对其进行更新。 我的方法有什么问题，为什么aaa没有增加 ？ 是TestCtrl在不同的范围比HomeCtrl虽然它应该是孩子HomeCtrl ，不是吗？

码：

http://codepen.io/hawkphil/pen/xbmZGm

HTML：

<script id="templates/home.html" type="text/ng-template">
      <ion-view view-title="Welcome" >
        <ion-content class="padding" >
          <p>Swipe to the right to reveal the left menu.</p>
          <p>(On desktop click and drag from left to right)</p>
          <p>{{ aaa }}</p>
          <div ng-controller="TestCtrl">
            <a ng-click="clickMe()" href="">Click Me</a>
          </div>
        </ion-content>
      </ion-view>
    </script>

JS：

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

.controller('TestCtrl', function($scope) {
    $scope.clickMe = function() {
    $scope.aaa++;
  }
})

ps我正在使用某人的代码，因此请忽略其他内容。

Answer 1

这与Ionic，UI路由器甚至Angular无关。 这就是javascript的工作方式。

您可以使用ng-if在普通Angular中看到同样的问题。 它与JavaScript的继承是如何工作要做。

如果子范围没有它自己的 aaa属性，它将使用它的父范围。 但是，一旦单击该按钮，便使其成为自己的财产，比父母的财产多一个。 但是现在它们是单独的属性，即父级的aaa和子级的aaa 。

例

您可以在此处看到纯JavaScript示例... Example 。 尽可能多地单击“ Inc Parent ，父级和子级显示都会增加。 单击Inc Child断开连接。 连接断开后，您可以通过单击Unhide按钮来删除孩子的属性，从而“取消隐藏”父值。

码

var obj = function () {}
obj.aaa = 10
obj.inc = function () {
  this.aaa += 1;
};

var objB = function () {};
objB.__proto__ = obj; // Make objB a child of obj
objB.inc = function () {
  this.aaa += 1;
};
objB.unhide = function () {
  delete this.aaa;
};

var update = function () {
  document.getElementById("p").textContent = obj.aaa;
  document.getElementById("c").textContent = objB.aaa;
};
update();

HTML

<button onclick="obj.inc(); update();">Inc Parent</button>
<button onclick="objB.inc();  update();">Inc Child</button>
<button onclick="objB.unhide();  update();">Unhide</button>

<p>
  Parent's value: <span id="p"></p>
</p>
<p>
  Child's value: <span id="c"></p>
</p>

Answer 2

每个控制器都有自己的$scope对象。 儿童控制器可以使用$parent访问其父母：

.controller('TestCtrl', function($scope) {
    $scope.clickMe = function() {
        $scope.$parent.aaa++;
    }
})

codepen