AngularJS-如何通过嵌套(自定义)指令将数据从子级传递到父级

对于“presentation”/“dumb”组件( directive3 和 directive4 ),我认为他们每个人都应该接受一个回调函数,当他们更改时,可以用新数据调用该函数:

scope: {
    // Invoke this with new data
    onChange: '&',
    // Optional if you want to bind the data yourself and then call `onChange`
    data: '='
}

directive2 指导性4 指导性3 指导性4 与应用程序分离,可重用。

如果它们是类似形式的指令(类似于 input 等等),另一种选择是让他们需要 ngModel 让他们使用 ngModelController $render $setViewValue 更多信息)。这样,您可以像这样使用它们:

<directive4 ng-model="someObj.someProp" ng-change="someFunc()"></directive4>

这样做时,在模型更新后 ng-change

对于“container”/“smart”指令( directive1 和 ),您也可以 指导性2 方向1 方向1 指导性2 方向1 和 指导性2 .

嵌套指令始终可以通过访问其父控制器 require value directive1 的范围。实现这一点的可能方法之一是在 方向1 setValue(value) 。然后在任何嵌套指令中,您需要 方向1 的控制器,这样您就可以访问setter 以及控制器提供的其他方法。

angular
  .module('yourModule')
  .directive('directive1', function() {
    return {
      controller:['$scope', funciton($scope) {
        return {
          setValue: setValue
        };

        funciton setValue(value) {
          $scope.value = value;
        }
      }]
      // The rest of the directive1's configuration
    };
  })
  .directive('directive4', function() {
    return {
      require: '^^directive1',
      link: (scope, elem, attrs, directive1Ctrl) {
        // Here you can call directive1Ctrl.setValue() directly
      }
      // The rest of the directive4's configuration
    };
  })

另一种方法是 $emit 来自子指令控制器的事件 价值 被孩子改变了。在这种情况下,父指令的控制器应该订阅该事件并处理随其传递的数据。