AngularJS單向綁定問題

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