Question

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

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

Parent.Controller.js

head

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

HTML模板

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

我原本期望＃2显示由父控制器定义的对象的值，因为子控制器还不应该执行（ChildController的<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>指令是在...之后的几行这一点）。

这是Plunk

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

谢谢，

菲利普

Answer 1

在以下情况下执行哪个控制器无关紧要：由于范围是在两个控制器之间继承的，因此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：如果你在父{和} console.log函数中添加init，你会看到父控制器确实在孩子之前读过。

Answer 2

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

由于在子范围中没有定义myObject，因此更改了父范围中的myObject。

Answer 3

Has nothing to do with execution order but with prototypal inheritance.

Primitives don't have inheritance but objects do.

Primitive example

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

b is assigned value that a had at the time of assignment only

object example

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

a and b are references to the same object

What you are seeing is the primitives don't bind to the parent but the object does ...as to be expected.

The childscope primitives will have values assigned from the parent based on what they are at the moment they are assigned. After that changes to either variable will be independent of the source or child

The objects are still references and changes made anywhere to any individual reference will be reflected in all references

AngularJS控制器继承和执行顺序

3 个答案: