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，在指令定义对象下，您可以看到您可以在指令的作用域定义中指定的三种不同的属性绑定。以您的指令的范围定义为例：

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的属性，其值为some_url.jpg（字符串）且指令URL_PARAM具有值imageUrl，则Angular将绑定您的指令属性到声明范围imageUrl属性，并在摘要周期中更改它。
＆安培; /＆amp; name：此定义将绑定一个属性属性，并将其视为指令可以调用的函数。例如，如果指令具有on-click属性，则用户可以从另一个范围中放置一个自定义函数将从指令的范围调用。

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

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

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

1 个答案: