Question

我在Ionic Framework中这样做。它始于具有home.html状态的eventmenu.home模板。 $scope.aaa变量为10，它正确显示该值。但是，在该模板的子控制器TestCtrl中，我无法更改$scope.aaa值并将其更新。 为什么aaa没有增加，我的方法出了什么问题？ TestCtrl的范围是否与HomeCtrl的范围不同，尽管它应该是HomeCtrl的孩子，不是吗？

CODE：

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

p.s我正在使用某人的代码，所以请忽略其他内容。

Answer 1

这不是Ionic或ui-router的问题，甚至不是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

范围变量未从状态父控制器继承到子控制器

2 个答案:

实施例