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

Question

我在 Ionic Framework 中执行此操作。它从 home.html 模板开始，状态为 eventmenu.home。 $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++;
  }
})

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

Answer 1

每个控制器都有自己的 $scope 对象。子控制器可以使用 $parent:

访问他们的父控制器

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

codepen

Answer 2

这不是 Ionic 的问题，也不是 ui-router 的问题，甚至 Angular 也不是问题。这就是 javascript 的工作原理。

您可以在使用 ng-if 的普通 Angular 中看到相同的问题。它与 javascript 继承的工作方式有关。

如果 child 范围没有它的 自己的 aaa 属性它使用它的 parent。但是，一旦您单击该按钮，您就使它成为 自己的 属性，比 parent 多一个。但现在它们是不同的属性，parent 的 aaa 和 child 的 aaa.

例子

你可以在这里看到一个纯粹的 javascript 例子... Example。随意点击Inc Parent，parent和child的显示都会递增。单击 Inc Child 会断开连接。连接断开后，您可以通过单击 Unhide 按钮删除 child 的属性来“取消隐藏”parent 值。

代码

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>

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

Scope variables not inherited to child controllers from state parent controller

javascript

angularjs

angularjs-scope

angular-ui-router

ionic-framework

例子