0

需要你的帮助。我想将我的自定义指令与如下参数一起使用：

<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>'
    };
});

这个怎么做？

4

1 回答 1

2

根据您的需要，您通常希望为指令创建同级范围（即，超出正常分层范围的范围，继承上层）以允许多个指令存在于同一级别内而不影响每个别人的属性。如果您查看指令的 AngularJS 文档条目，在指令定义对象下，您可以看到可以在指令的范围定义中指定的三个不同的属性绑定。以你的指令的这个范围定义为例：

scope: { 
  urlParamAttr: '@URL_PARAM', 
  urlParamEval: '=URL_PARAM', 
  urlParamFn:'&URL_PARAM' 
}
  • @ / @name：此定义将属性的纯值绑定到指令范围。在示例中，urlParamAttr指令范围内的属性将绑定到指令的URL_PARAM纯 HTML 属性。这将始终是一个字符串，因为 HTML 属性是一个文本节点，其值为some_url.jpg
  • = / =name：这会将定义范围上下文中的属性评估绑定到指令范围内的属性。在示例中，Angular 将尝试评估some_url.jpg并且会失败，因为它不是有效的 javascript。如果指令的属性值为'some_url.jpg'，它将被评估为字符串（因为引号）。如果定义指令的作用域有一个名为（字符串）的属性，并且指令imageUrl的值为，Angular 会将指令的属性绑定到声明作用域的属性，并在摘要循环中更改时更新它。some_url.jpgURL_PARAMimageUrlimageUrl
  • & / &name：此定义将绑定一个属性属性并将其视为您指令可以调用的函数。例如，如果您的指令有一个on-click属性，则用户可以从另一个作用域放置自定义函数，该函数将从指令的范围。

在您的情况下，您可以将属性视为纯 HTML（您可以根据需要更改它）并更改模板以绑定到指令的范围属性：

.directive('customImage', function() {
    return {
        replace: true,
        scope: {
            urlParam: '@URL_PARAM',
            figParam: '@FIG_PARAM'
        },
        template: '<div> <img src="{{urlParam}}"/> {{figParam}} </div>'
    };
});
于 2013-09-01T11:15:33.677 回答