Angularjs - 将参数传递给指令

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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指令一样将参数传递给自定义指令 - 通过在directive-element上指定一个属性:

angular.element(document.getElementById('wrapper'))
       .append('<directive-name title="title2"></directive-name>');

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

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

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

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

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

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

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

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

scope: {
    title: '@directiveName'
}

还请注意以下事项:

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

以下是我解决问题的方法:

指示

app.directive("directive_name", function(){
    return {
        restrict: 'E',
        transclude: true,
        template: function(elem, attr){
           return '<div><h2>{{'+attr.scope+'}}</h2></div>';
        },
        replace: true
    };
})

调节器

$scope.building = function(data){
    var chart = angular.element(document.createElement('directive_name'));
    chart.attr('scope', data);
    $compile(chart)($scope);
    angular.element(document.getElementById('wrapper')).append(chart);
  }

我现在可以通过相同的指令使用不同的范围并动态地附加它们。

另一答案

您可以尝试如下:

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

它在'accept'属性的值和父范围之间建立双向绑定。

您还可以使用属性设置双向数据绑定:'='

例如,如果您希望键和值都绑定到本地范围,您将执行以下操作:

  scope:{
    key:'=',
    value:'='
  },

欲了解更多信息,https://docs.angularjs.org/guide/directive

所以,如果你想将一个参数从控制器传递给指令,那么请参考下面的小提琴

http://jsfiddle.net/jaimem/y85Ft/7/

希望能帮助到你..

另一答案
<button my-directive="push">Push to Go</button>

app.directive("myDirective", function() {
    return {
        restrict : "A",
         link: function(scope, elm, attrs) {
                elm.bind('click', function(event) {

                    alert("You pressed button: " + event.target.getAttribute('my-directive'));
                });
        }
    };
});

这就是我做的

我使用指令作为html属性,我在我的HTML文件中传递参数如下。 my-directive="push"从指令我从Mouse-click事件对象中检索它。 event.target.getAttribute('my-directive')

以上是关于Angularjs - 将参数传递给指令的主要内容,如果未能解决你的问题,请参考以下文章

MobileFirst:如何使用 angularJS 将参数传递给适配器

如何将不同的参数传递给片段 [导航] Android

将参数传递给 XML 布局中定义的片段

使用指令将参数传递给子组件角度

如何使用 Promise 将参数传递给 AngularJS 中的函数

如何使用底部导航视图和 Android 导航组件将参数传递给片段?