AngularJS One-Way Binding Issue

Question

I have an object in MainCtrl and pass it to child component with one-way binding. When I change it in child template, changed parent object in MainCtrl. Where is my problem?

(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" />

Alexander Anikeev · Accepted Answer · 2017-06-29 10:13:06Z

3

It's not your problem. Objects are always passed by reference. No matter, one-way or two-way binding are used. To avoid it, you must do copy of object in child component

Note however, that both parent and component scope reference the same object, so if you are changing object properties or array elements in the component, the parent will still reflect that change. The general rule should therefore be to never change an object or array property in the component scope

Understanding Components

One-way data-binding in Angular 1.5

edited Jun 29, 2017 at 10:13

answered Jun 29, 2017 at 10:07

Alexander Anikeev

7016 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS One-Way Binding Issue

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related