AngularJS - 将配置参数传递给指令

Question

我想将参数（值和函数）传递给 Angular 指令。

我觉得 Angular 中存在类似的东西，但是我找不到。也许我没有使用正确的搜索词或术语......

例子

<my-directive my-param="55" some-title="My title" click-callback="myOnClickCallback">
</my-directive>

这可行吗？

Answer 1

您不必像其他答案那样为指令创建私有范围。这取决于你想用指令做什么。

您可以简单地为您的指令创建一个私有范围，查看其他答案，或者使用链接中的 attr，或者如果您想共享父范围，请编译函数。

 link: function(scope, element, attrs) {
      attrs.myParam === 55;
      attrs.someTitle === "My Title";
      attrs.clickCallback === myOnClickCallback;
    }

我拿了你的问题的例子来证明它。

如果您对“@”和“=”等指令范围属性有疑问，请查看此answer 并阅读角度文档。

Answer 2

这是一个有效的demo，它向您展示了如何做到这一点。

app.directive('myDirective', function(){
  return {
    replace: true,
    scope : {
      myParam : '@',
      someTitle : '@',
      clickCallback: '&'
    },
    link: link,
    template: '<p>{{someTitle}}</p>'
  }


  function link(scope, elem, attrs){
    elem.bind('click', function(){
      scope.clickCallback();
    }) 

    console.log(scope.myParam);
    console.log(scope.someTitle);
  }
})

因此，将数据传递给指令范围，使用“@”（传递字符串时）和“&”作为函数。

& 将让您在原始范围内传递回调并执行它们。

您可以在angular docs 上阅读更多内容。

Answer 3

指令“=”、“&”、“@”中有三个不同的选项

你要使用的两个是

"&" 会让你传入一个函数

"@" 将接受一个字符串

有些东西一文不值，camelCase 属性在赋值时会被 angular 自动解析并变成驼峰式（注意连字符）

.directive("myDialog", function() {
    return {
        restrict: "E", // allows us to restrict it to just elements ie <my-dialog>
        scope: {
            "close": "&onClose", // putting a new name here allows us to reference it different on the html
            // would become <my-dialog on-close="someFn()"></my-dialog>
            "myParam": "@"
        },
        template: "<button type='button' data-ng-click='close()'>Dummy - {{myParam}}</button>"
      };
});


.controller("fooCtrl", [function(){
    var vm = this;
    vm.someRandomFunction = function(){
        alert("yay!");
    };
}]);

最终的 html 看起来像

<div ng-controller="fooCtrl as vm">
    <my-dialog on-close="vm.someRandomFunction()" my-param="55"></my-dialog>
</div>

值得 reading 以及答案上的链接

Plnkr

Answer 4

试试这个，你会得到 attrs 的值

链接：

function(scope, element, attrs) {
    alert(attrs.myParam);
},

Answer 5

    .directive('myPane', function() {
      return {
        require: '^myTabs',
        restrict: 'E',
        transclude: true,
        scope: {

        /*
        *Exmaple:
        <my-directive my-param="55" some-title="My title" click-callback="myOnClickCallback">
</my-directive>
         */
          myParam: '@',//@ is a string parameter 
          someTitle:'@',
         /*is a double direction parameter 
         *(changable in the directive itself)
         *You can pass by '=' objects and functions(with parameters)
         */

          clickCallback:'=' 
        },
        link: function(scope, element, attrs) {
          //Here you write functions of the directive and manipulate it's scope
        },
        templateUrl: 'template.html'
      };
    });

欲了解更多信息：https://docs.angularjs.org/api/ng/directive/ngClass。

祝你好运！