我在 Ionic Framework 中执行此操作。它以 eventmenu.home
状态从 home.html
模板开始。 $scope.aaa
变量是 10
,它正确显示了该值。但是,在该模板的子 Controller 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 我正在使用别人的代码,所以请忽略其他内容。
最佳答案
这不是 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>
关于javascript - 范围变量未从状态父 Controller 继承到子 Controller ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29141073/