AngularJS 嵌套组件双向绑定 - 不起作用

Question

我是 AngularJS 的新手，我遇到了使用 AngularJS 组件进行双向绑定的问题。我有嵌套的组件，我正在尝试绑定某些东西并在较低级别（子组件）更改它。

只能从父级别更改。
$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 demo

Answer 1

实际上 self.text 你只是在更新自己的控制器值而不是父范围

日期中的值正在更新，因为对象是通过引用传递的，无论你在哪里更改它的值，它都会反映到父级，但文本值不会像这样更新

您需要指定现在将哪个文本属性传递给子控制器，因为父控制器也有一个文本属性，所以如果您想传递 parents.parents 文本属性在你身上这样做<child>

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

我希望这能解决问题

AngularJS 嵌套组件双向绑定 - 不起作用

AngularJS nested components two way binding - doesn't work

angularjs

angular-components