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

我是在爱奥尼亚的框架下做的。它开始于

home.html

模板中的

eventmenu.home

状态。

$scope.aaa

变量是

10

，它正确地显示了该值。但是，在该模板的子控制器

TestCtrl

中，我无法更改

$scope.aaa

值并对其进行更新我的方法有什么问题，为什么

aaa

没有增加？

TestCtrl

是否在与

HomeCtrl

不同的范围内，尽管它应该是

HomeCtrl

的子项，否

代码：

HTML:

---

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

每个控制器都有自己的

$scope

对象。子控制器可以使用

$parent

访问其父控制器：

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

---

这不是爱奥尼亚、ui路由器甚至Angular的问题。这就是javascript的工作原理

使用

ng if

，您可以看到同样的问题在普通角度中出现。这与javascript继承的工作方式有关

如果子作用域没有自己的

aaa

属性，它将使用其父作用域。但是一旦你点击了按钮，你就把它变成了自己的财产，比父母的多了一个。但现在它们是独立的属性，父母的

aaa

和孩子的

aaa

例子 您可以在这里看到一个纯javascript示例。。。 . 尽可能多地单击

Inc父项

，父项和子项显示都会递增。单击

Inc子项

将断开连接。一旦连接断开，您可以通过单击

取消隐藏

按钮删除子属性来“取消隐藏”父值

代码

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>

Inc母公司
儿童公司
解开

家长的价值观：



儿童价值观：

但原则上，范围变量是从父级继承的。在这种情况下为什么不呢？我做了什么不同？这是如何解决问题，但它不是对问题的解释。为什么不使用服务呢？除非我遗漏了什么？此外，您提供的代码并没有反映您链接到我可以使用的服务的代码笔，但这不是问题所在。我的问题是关于$scope的继承原则。我理解这个逻辑，但我不明白为什么不自动重用父变量。我决定就如何在angular应用程序中修复此逻辑发表一个单独的问题@惠普他们为什么要改变什么？这是javascript中的预期行为。改变它的行为方式会让很多javascript程序员想知道发生了什么。

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();

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