Двусторонняя привязка вложенных компонентов AngularJS - не работает

Я новичок в AngularJS, и у меня возникла проблема с двусторонней привязкой с использованием компонентов AngularJS. У меня есть вложенные компоненты, и я пытаюсь что-то связать и изменить на более низком уровне (дочерний компонент).

  1. Его можно изменить только с родительского уровня.
  2. $onChanges не работает, и я не могу понять, почему.

var myApp = angular.module('myApp', []);
myApp.controller('cc', function($scope) {
  $scope.text = 'Initial';
  $scope.data = {
    text: 'Initial'
  };
  $scope.change = function() {
    $scope.data.text = 'Root changed';
    $scope.text = 'Root changed';
  };
});

myApp.component('parent', {
  transclude: true,
  bindings: {
    data: "<",
    text: "="
  },
  template: '<div><button ng-click="parentController.click()">Parent change</button><div ng-transclude></div></div>',
  controller: function($scope) {
    var self = this;
    this.click = function() {
      self.data.text = 'Parent changed';
      self.text = 'Parent changed';
    };
    this.$onChanges = function() {
    	console.log('$onChanges');
    }
  },
  controllerAs: 'parentController'
});

myApp.component('child', {
  bindings: {
    data: "<",
    text: "="
  },
  template: '<button ng-click="childController.click()">Child Change</button>',
  controller: function() {
    var self = this;
    this.click = function() {
      self.data.text = 'Child changed';
      self.text = 'Child changed';
    };
  }, 
  controllerAs: 'childController'
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="cc">
  <div>
    {{data.text}} text
  </div>
  <div>
    {{text}} text
  </div>
  <button ng-click='change()'>
    Root Change
  </button>
  <parent data="data" text="text">
    <child data="data" text="text"></child>
  </parent>
</div>

Спасибо!

демонстрация JSFiddle


angularjs angular-components
person HadarZH    schedule 05.09.2017    source источник
comment
вы хотите изменить текст из дочернего, верно?   -  person Ghulam Mohayudin    schedule 05.09.2017

Ответы (1)


arrow_upward
1
arrow_downward

На самом деле с self.text вы обновляете только собственное значение контроллера, а не родительскую область.

Значение в дате обновляется, потому что объект передается по ссылке, и когда бы вы ни изменили его значение, оно будет отражено в родительском, но текстовое значение не будет обновляться, как это

Вам нужно указать, какое текстовое свойство теперь передается дочернему, потому что родительский контроллер также имеет текстовое свойство, поэтому, если вы хотите передать текстовое свойство parent.parents, сделайте это так: <child>

<child data="data" text="$parent.$parent.text"></child>

надеюсь это решит проблему

person Ghulam Mohayudin    schedule 05.09.2017