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;
    }

我在你的问题上采用了这个例子，以证明它。

如果您对指令范围有疑问，可以使用＆＃34; @＆＃34;和＆＃34; =＆＃34;，请检查此answer并阅读角度文档。

Answer 2

指令中有三种不同的选项＆＃34; =＆＃34;，＆＃34;＆amp;＆＃34;，＆＃34; @＆＃34;

你想要使用的两个是

＆＃34;＆安培;＆＃34;会让你通过一个函数

＆＃34; @＆＃34;将接受一个字符串

什么都没有价值，camelCase属性将由angular自动解析，并在赋值时变为camel-case（注意炒作）

.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 3

这是一个工作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);
  }
})

因此，使用＆＃39; @＆＃39;传递数据您的指令范围。（通过字符串时）和＆＃39;＆amp;＆＃39;用于功能。

＆amp;＆amp;将允许您在原始范围内传递回调并执行它们。

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

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。

祝你好运！

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

5 个答案: