Question

我在MainCtrl中有一个对象，并通过单向绑定将其传递给子组件。当我在子模板中更改它时，在MainCtrl中更改了父对象。我的问题在哪里？

(function(angular) {
  'use strict';
angular.module('heroApp', []).controller('MainCtrl', function MainCtrl() {
  this.hero = {
    name: 'Spawn'
  };
});
})(window.angular);

(function(angular) {
  'use strict';
angular.module('heroApp').component('heroDetail', {
  templateUrl: 'heroDetail.html',
  bindings: {
    hero: '<'
  }
});
})(window.angular);

<div ng-controller="MainCtrl as ctrl">
  <span>Parent Obejct Name: </span>{{ ctrl.hero.name }}
  <br/>
  <hero-detail hero="ctrl.hero"></hero-detail>
</div>

<span>Child Object Name: {{$ctrl.hero.name}}</span>
<br/>
<input type="text" ng-model="$ctrl.hero.name" />

Answer 1

这不是你的问题。对象始终通过引用传递。无论如何，使用单向或双向绑定。要避免它，您必须在子组件

中复制对象

但请注意，父级和组件范围都引用相同的内容对象，所以如果要更改对象属性或数组元素该组件，父母仍将反映这一变化。一般因此，规则应该是永远不要更改对象或数组属性在组件范围

Understanding Components

One-way data-binding in Angular 1.5

AngularJS单向绑定问题

1 个答案: