Question

我希望找到通过嵌套指令发送范围的最佳方法。

我发现你可以做$scope.$parent.value，但我明白这不是最佳做法，应该避免。

所以我的问题是，如果我有4个嵌套指令，如下所示，每个都有自己的控制器，其中一些数据被修改，在directive1中从directive4（比如说$scope.valueFromDirective4）访问值的最佳方法是什么？

<directive1>
    <directive2>
        <directive3>
            <directive4>
            </directive4>
        </directive3>
    </directive2>
</directive1>

Answer 1

嵌套指令始终可以访问其父母＆＃39;控制器通过require。我们假设您要从value范围内的任何嵌套指令更改directive1。实现这一目标的一种可能方法是在directive1的控制器setValue(value)中声明一个setter。然后在任何嵌套指令中，您需要directive1的控制器，这样您就可以访问setter setValue(value)以及控制器提供的其他方法。

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时，来自子指令控制器的value事件。在这种情况下，父指令的控制器应该订阅该事件并处理随之传递的数据。

Answer 2

对于＆＃34;演示＆＃34; /＆＃34;哑巴＆＃34;组件（directive3和directive4），我认为他们每个人都应该接受一个回调函数，当他们改变时，他们可以用新数据调用它们：

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

只需将回调从directive2传递到directive4。这种方式directive3和directive4与您的应用分离并可重复使用。

如果它们是类似于表单的指令（类似于input等），则另一个选项是调查它们是否需要ngModel并让它们使用ngModelController来更新父级和视图。（查看$render和$setViewValue了解更多相关信息）。这样你就可以使用它们：

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

当你这样做时，更新模型后会自动调用ng-change函数。

对于＆＃34;容器＆＃34; /＆＃34;聪明＆＃34;指令（directive1和directive2），您也可以directive2接受从directive1传入的回调。但由于directive1和directive2都可以了解您的应用，因此您可以编写一个在directive1和directive2之间注入和共享的服务。

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

2 个答案: