Angularjs – 将参数传递给指令

前端之家收集整理的这篇文章主要介绍了Angularjs – 将参数传递给指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想知道是否有一种方法来传递参数到指令?

我想做的是从控制器附加一个指令,像这样:

$scope.title = "title";
$scope.title2 = "title2";

angular.element(document.getElementById('wrapper')).append('<directive_name></directive_name>');

是否可以同时传递参数,所以我的指令模板的内容可以链接到一个范围或另一个?

这里是指令:

app.directive("directive_name",function(){
    return {
        restrict:'E',transclude:true,template:'<div class="title"><h2>{{title}}</h3></div>',replace:true
    };
})

如果我想使用相同的指令,但与$ scope.title2怎么办?

你可以像使用内置的Angular-directives一样,通过在directive-element指定一个属性来传递参数给你的自定义指令:
angular.element(document.getElementById('wrapper'))
       .append('<directive-name title="title2"></directive-name>');

您需要做的是在指令的工厂函数中定义范围(包括参数/参数)。在下面的示例中,指令采用标题参数。然后,您可以使用它,例如在模板中,使用常规的Angular-way:{{title}}

app.directive('directiveName',function(){
   return {
      restrict:'E',scope: {
         title: '@'
      },template:'<div class="title"><h2>{{title}}</h2></div>'
   };
});

根据你想要绑定的方式/你想要绑定,你有不同的选择:

> =是双向绑定
> @只读取值(单向绑定)
>&用于绑定函数

在某些情况下,您可能需要使用不同于“内部”名称的“外部”名称。外部我的意思是指令元素上的属性名称,内部我的意思是指令范围内使用的变量的名称

例如,如果我们查看上面的指令,您可能不想为标题指定另一个附加属性,即使您内部希望使用title-property。相反,你想使用你的指令如下:

<directive-name="title2"></directive-name>

这可以通过在范围定义中在上述选项后面指定名称来实现:

scope: {
    title: '@directiveName'
}

请注意以下事项:

> HTML5规范说,自定义属性(这基本上是Angular应用程序中的所有地方)应该以数据为前缀。 Angular通过从任何属性中剥离数据 – 前缀来支持此操作。所以在上面的例子中,你可以指定元素上的属性(data-title =“title2”),在内部,一切都是一样的。
>元素上的属性总是以< div data-my-attribute =“...”/>而在代码(例如,范围对象的属性)中,它们是以myAttribute的形式。我失去了很多时间,我才意识到这一点。
>对于在不同的Angular组件(控制器,指令)之间交换/共享数据的另一种方法,您可能需要查看服务或指令控制器。
>您可以在Angular homepage (directives)上找到更多信息

原文链接:https://www.f2er.com/angularjs/145716.html

猜你在找的Angularjs相关文章