javascript - 如何将指令参数传递给指令

Question

需要你的帮助。我想使用带有如下参数的自定义指令:

<p customImage URL_PARAM="some_url.jpg" FIG_PARAM="Fig 1."></p>

我的目标是在模板中使用指令参数，如下所示:

.directive('customImage', function() {
    return {
        replace: true,
        template: '<div> <img src="URL_PARAM"> FIG_PARAM </div>'
    };
});

如何制作这个？

Answer 1

根据您的需要，您通常希望为指令创建同级作用域(即，位于正常分层作用域之外、继承上层的作用域)，以允许多个指令存在于同一级别内且不影响彼此的属性。如果你看看 AngularJS documentation entry for directives ，在指令定义对象下，您可以看到可以在指令的范围定义中指定的三个不同的属性绑定(bind)。以指令的范围定义为例:

scope: { 
  urlParamAttr: '@URL_PARAM', 
  urlParamEval: '=URL_PARAM', 
  urlParamFn:'&URL_PARAM' 
}

• @/@name:此定义将属性的纯值绑定(bind)到指令范围。在示例中，指令范围内的 urlParamAttr 属性将绑定(bind)到指令的 URL_PARAM 纯 HTML 属性。这将始终是一个字符串，因为 HTML 属性是一个文本节点，并且其值为 some_url.jpg
• =/=name:这会将定义范围上下文中的属性评估绑定(bind)到指令范围内的属性。在示例中，Angular 将尝试评估 some_url.jpg 并会失败，因为它不是有效的 javascript。如果指令的属性值为 'some_url.jpg'，它将被评估为字符串(因为有引号)。如果定义指令的范围有一个名为 imageUrl 的属性，其值为 some_url.jpg(字符串)，并且指令 URL_PARAM 的值为imageUrl，Angular 会将指令的属性绑定(bind)到声明范围 imageUrl 属性，并在摘要周期中发生变化时更新它。
• &/&name:此定义将绑定(bind)一个属性并将其视为指令可以调用的函数。例如，如果您的指令具有 on-click 属性，则用户可以将来自另一个作用域的自定义函数，将从指令的作用域中调用。

在您的情况下，您可以将该属性视为纯 HTML(并且可以根据需要更改它)并更改模板以绑定(bind)到指令的范围属性:

.directive('customImage', function() {
    return {
        replace: true,
        scope: {
            urlParam: '@URL_PARAM',
            figParam: '@FIG_PARAM'
        },
        template: '<div> <img src="{{urlParam}}"/> {{figParam}} </div>'
    };
});