AngularJS控制器继承和执行顺序

Philip Tenn 发表于 Dev

菲利普·滕恩

我正在使用父/子Controller继承在Angular中工作，并且遇到一些我不理解的行为。

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

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

Child.Controller.js

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>

我本来希望＃2显示由父控制器定义的对象的值，因为子控制器应该尚未执行（ng-controllerChildController的指令位于此代码以南两行）。

这是一个朋克

如果有人可以帮助我理解这种行为，我将非常感激。

谢谢，

菲利普

弗洛里邦

何时执行哪个控制器都没有关系：由于作用域是在两个控制器之间继承的，因此myObject变量也是如此。

因此，当子控制器update时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：如果您console.log在父子init功能中都添加了一个，则会看到父控制器确实在子控制器之前被读取。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。