Javascript AngularJS控制器继承和执行顺序

我在处理父/子控制器继承时遇到了一些我不理解的行为

基本上，我在父控制器中的对象上设置了一个属性，并在子控制器中将其设置为不同的值。在运行子控制器中的代码之前，我输出在父控制器中设置的值。但是，我看到子控制器代码已经运行并设置了值

Parent.Controller.js

testapp.controller('ParentController', function($scope) {
  $scope.init = function() {
    $scope.myValue = 'Primitive value, defined in ParentController';
    $scope.myObject = {
      value: "Object property value, defined in ParentController"
    }
  } 

  $scope.init();
});

testapp.controller('ChildController', function($scope) {
    $scope.init = function() {
    $scope.myValue = 'Primitive value, set in ChildController';
    $scope.myObject.value = "Object property value, set in ChildController";
  } 

  $scope.init();
});

Child.Controller.js

testapp.controller('ParentController', function($scope) {
  $scope.init = function() {
    $scope.myValue = 'Primitive value, defined in ParentController';
    $scope.myObject = {
      value: "Object property value, defined in ParentController"
    }
  } 

  $scope.init();
});

testapp.controller('ChildController', function($scope) {
    $scope.init = function() {
    $scope.myValue = 'Primitive value, set in ChildController';
    $scope.myObject.value = "Object property value, set in ChildController";
  } 

  $scope.init();
});

HTML模板

<div ng-controller="ParentController" class="outer">
  1. Primitive value on scope: <span style="font-weight:bold">{{myValue}}</span>
  <br/>2. Object value on scope: <span style="font-weight:bold">{{myObject.value}}</span>
  <p>
    <div ng-controller="ChildController" class="inner">
      3. Primitive value on scope: <span style="font-weight:bold">{{myValue}}</span>
      <br/>4. Object value on scope: <span style="font-weight:bold">{{myObject.value}}</span>
    </div>
  <p>
  5. Primitive value on scope: <span style="font-weight:bold">{{myValue}}</span>
  <br/>6. Object value on scope: <span style="font-weight:bold">{{myObject.value}}</span>      
</div>

1.作用域上的基元值：{{myValue}}

2。作用域上的对象值：{{myObject.value}

3.作用域上的基元值：{{myValue}}

4。作用域上的对象值：{{myObject.value}

5.作用域上的基元值：{{myValue}}

6。作用域上的对象值：{{myObject.value}

我本来希望#2显示由父控制器定义的对象的值，因为子控制器还不应该执行（ChildController的

ng Controller

指令在此以南几行）

这里有一个

如果有人能帮助我理解这种行为，我会非常感激

谢谢

---

Philip

执行哪个控制器并不重要：因为作用域是在两个控制器之间继承的，所以

myObject

变量也是如此

因此，当子控制器更新

myObject.value

时，它使用与其父控制器相同的

myObject

，因此您在HTML中的两个位置都可以看到相同的值

这是意料之中的，也是经常需要的。如果不希望子控制器影响其父控制器，则应在该子控制器上定义一个新对象：

testapp.controller('ChildController', function($scope) {
  $scope.init = function() {
    $scope.myValue = 'Primitive value, set in ChildController';
    $scope.myChildObject =  {value: "Object property value, set in ChildController"};
  } 
});

---

PS：如果在父级和子级

init

函数中添加

console.log

，您将看到父级控制器确实是在子级控制器之前读取的。

稍后更改值时，动态绑定也会更改变量的第一次显示

---

由于子作用域中未定义myObject，因此父作用域中的myObject会发生更改。

与执行顺序无关，而是与原型继承有关

基本体没有继承，但对象有继承

原始示例

var a="foo";
var b = a; //"foo"
a="some value"
alert(b) // is still "foo"

b

是仅在赋值时

a

具有的赋值

对象示例

var a={x:'foo'};
var b = a; //  {x:'foo'}
a.x="a new value";
alert(b.x) // also changed to "a new value" 

a

和

b

是对同一对象的引用

您看到的是，原语没有绑定到父对象，但对象确实绑定到父对象……正如预期的那样

childscope原语将根据其被指定时的状态，从父级指定值。之后，对任一变量的更改将独立于源或子变量

对象仍然是引用，对任何单个引用所做的任何更改都将反映在所有引用中