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

我正在寻找通过嵌套指令发送范围的最佳方式。AngularJS - 如何通过从子项到父项的嵌套（自定义）指令传递数据

我发现你可以做$scope.$parent.value，但我知道这不是最佳做法，应该避免。所以我的问题是，如果我有像下面这样的4个嵌套指令，每个都有自己的控制器，其中一些数据正在被修改，那么在指令1中访问来自指令4（假设为$scope.valueFromDirective4）的值的最佳方法是什么？

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

来源

2017-07-24 Mihai Banu

从他们可以了解您的应用程序及其服务的意义上说，这些指令是否“智能”？或者你想让这些指令真正与应用程序分离并且可重用（你只需通过属性将它们所需的数据传递给它们）。如果他们不知道你的应用程序，他们可以相互了解吗？ –

让我们假设指令1和2是智能的，而指令3,4只是在屏幕上显示一些元素（我们可以认为它们是一些输入字段，它们包含需要在指令1和2中访问的一些数据） –

嵌套指令始终可以通过require访问其父母的控制器。假设您想从directive1的作用域中将value更改为其任何嵌套指令。其中一种可能的方法是在directive1的控制器setValue(value)中声明一个setter。然后，在任何嵌套指令中，您需要使用directive1的控制器，通过这样做，您可以访问设置器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由孩子改变。在这种情况下，父指令的控制器应订阅该事件并处理与之一起传递的数据。

来源

2017-07-24 15:32:04 xReeQz

这似乎仍然是有一点需要的方法 - 直到现在还没有真正看到。目前，我发现一个解决方案似乎更好，根据一些文章，我在其中定义了一个在directive1中的函数，并将其作为属性传递给嵌套的指令。通过这种方式，我可以用一个参数来调用指令4中的函数，该参数包含我想要在指令1中编辑的数据。 –

@MihaiBanu也许在单独的答案中写下您的发现，请让我们看看。 – DerMike

对于“表象” /“哑”组件（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功能被自动调用之后。

对于“容器” /“智能”指令（directive1和directive2），你也可以有directive2取其中从directive1通过回调。但由于directive1和directive2都可以了解您的应用，因此您可以编写在directive1和directive2之间注入和共享的服务。

来源

2017-07-25 13:07:20

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

回答

相关问题