如何传递指令参数指令 [英] How to pass directive parameters to directive

问题描述

需要你的帮助。我想用我的自定义指令，像这样的参数：

Need your help. I would like to use my custom directive with parameters like this:

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

我的目标是在这样的模板的指令参数：

My target is to use the directive parameters in the template like this:

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

如何让这一个？

推荐答案

根据你需要什么，你通常要创建一个同级范围的指令（即，活出正常的层次范围的范围，继承上层），允许多个指令，同级别内生活，而不会影响彼此的属性。如果你有一个看一下指令AngularJS 文档录入，根据指令定义对象，你可以看到三个不同属性的绑定您可以在指令的范围定义指定。把你的指令的这个范围定义，作为一个例子：

Depending on what you need, you usually want to create a sibling scope for the directive (that is, a scope that lives out of the normal hierarchical scope, inheriting the upper levels) to allow multiple directive to live within the same level without affecting each other's properties. If you have a look at AngularJS documentation entry for directives, under directive definition object, you can see three different property binding you can specify in your directive's scope definition. Take this scope definition of your directive, as an example:

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

• @ / @名称：这个定义将属性的普通值绑定到该指令范围。在这个例子中，在你的指令范围 urlParamAttr 属性将被绑定到指令的 URL_PARAM 纯HTML属性。这将永远是一个字符串作为HTML属性是一个文本节点，将有 some_url.jpg
价值

• = / =名：这将在限定的范围的情况下的属性的评价结合上的指令的范围的特性。在这个例子中，角将尝试评估 some_url.jpg 键，因为它不是有效的JavaScript将失败。如果该指令有'so​​me_url.jpg'的属性值，它会被作为一个字符串评估（因为引号）。如果你定义指令范围内有一个名为属性图片网址与 some_url.jpg （字符串）的值，指令 URL_PARAM 值为图片网址，角将绑定你的指令的财产申报范围图片网址财产，因为它在消化周期的变化进行更新。


• ＆安培; /＆放大器;名称：这个定义将绑定属性财产，把它当作你指令可以call.For例如一个函数，如果指令具有上点击属性，用户可以从另一个范围将从该指令的范围被称作把自定义函数。


• @ / @name: This definition will bind an attribute's plain value to the directive scope. In the example, a urlParamAttr property on your directive scope will be bound to the directive's URL_PARAM plain HTML attribute. This will always be a string as a HTML attribute is a text node and will have the value of some_url.jpg
• = / =name: This will bind the evaluation of the attribute in the context of the defining scope to a property on your directive's scope. In the example, Angular will try to evaluate some_url.jpg and will fail as it is not valid javascript. If the directive have an attribute value of 'some_url.jpg', it will be evaluated as a string (because of the quotes). If the scope defining your directive has a property called imageUrl with a value of some_url.jpg (a string) and the directive URL_PARAM has the value imageUrl, Angular will bind your directive's property to the declaring scope imageUrl property and update it as it changes in a digest cycle.
• & / &name: This definition will bind an attribute property and treat it as a function that you directive can call.For example, if you directive has an on-click property, a user could put a custom function from another scope that will be called from the directive's scope.

在你的情况，你可以把属性为纯HTML（你可以根据自己的需要改变），并改变你的模板绑定到该指令的作用域属性：

In your case, you can treat the attribute as plain HTML (and you can change it depending on your needs) and change your template to bind to the directive's scope properties:

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

这篇关于如何传递指令参数指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！