Angular：将参数发送到指令的正确方法答案

【问题标题】：Angular: Correct way to send parameters to directiveAngular：将参数发送到指令的正确方法
【发布时间】：2017-03-14 09:42:47
【问题描述】：

我对 Angular 有点陌生，我正在尝试掌握如何以“正确”的方式使用 Angular 来处理指令。

我的用例是我正在使用 Angular 和 ThreeJS 开发一个 3D 项目查看器。用户可以有不同的“项目”可供他查看。

我们想要利用项目标识的方式是通过url参数，这样一个人就可以将一个特定的项目链接到其他人来查看。

Viewer/Renderer被定义为一个指令，这样我们就可以定义如下的viewer

...
    <viewer></viewer>
...

据我了解，有一些不同的方法可以将 url 参数传递给查看器指令，我正在尝试利用 $stateParams 从 url 访问参数。但是当我继续工作时，没有“明确”的方式来访问 $stateParams，但你必须将控制器连接到指令，然后从那里访问它。

这是执行此操作的预期方式吗？还是应该将其定义为查看器指令的属性？如果是这样，我如何访问 html 代码中的 url 参数？还是有第三种更好的选择？

正如您可能理解的那样，我对 Angular 有点陌生，我主要想了解 Angular 的预期用途，这样一开始我就不会搞砸太多。

最好的问候，大卫。

【问题讨论】：

【解决方案1】：

你可以访问你的url parameters via scope，因为你将传递一个字符串，所以@在这里更有意义：

scope: {
    datasource: '@'
}

在您的指令中，您可以像这样传递值：

<viewer datasource={{urlParamValue}}></viewer>

在您的controller 中，您可以像这样收集 url 参数：

function Controller($scope, $location){
    var urlParamValue = $location.search().urlParamValue;    
}

【讨论】：

除了范围声明之外，您的答案很好。首先，您不需要在@ 后面加上名称，除非您想重命名您的字段。 datasource: '@datasource' 是多余的，等效于 datasource: '@'。其次，您需要单向< 或双向= 绑定，或者您需要将urlParamValue 包裹在模板中的大括号中。否则，您最终会得到字符串 urlParamValue，而不是指令中的实际 url 参数。
@PerfectPixel: 啊谢谢.. 改变了... 我不认为我们需要在这里进行双向数据绑定... 因为它的 url 参数值并且它主要是字符串.. .
非常感谢。我设法利用了你在这里提到的东西。虽然它背后可能是一个很好的设计，但当您刚刚了解到可以向服务和控制器注入很多很酷的参数时，当同样的事情不适用于指令时，您会感到有些沮丧。
如果要优化，可以使用一次性绑定{{::urlParamValue}}，因为参数不应该在视图不改变的情况下改变。顺便说一句，您可以将$location 注入到您的指令中，但是，它不一定是好的设计。 ;-)

【解决方案2】：

您可以使用如下方式进行 2 向绑定。

scope: {
    datasource: '=datasource'
}

【讨论】：