Question

是否有办法允许用户为指令赋予方法名称，让指令在scope上创建该方法，然后处理对该方法的调用？

所以，首先我让用户定义方法名称HELLO，然后让用户从其他地方调用HELLO（仍然在同一范围内）

<div ng-controller="AppController">
    <div mydirective="" mydirective-data="MyJson" mydirective-fx="HELLO" />
    <button ng-click="HELLO()">Click me</button>
</div>

在内部，指令应该看到HELLO并将其映射到自己的方法。在指令中，我正在查看传入的方法名称并分配它

app.directive('mydirective', function() {
       return {
         restrict: 'A',
         scope: {
           data: '=mydirectiveData',
           fx: '=mydirectiveFx'
         },
         link: function(scope, element, attrs) {
             scope.fx = function () { console.log(scope.data); } ;
             }
         }
       }
    );

正如您所看到的，我将scope.fx（应为HELLO）分配给应在控制器中定义的scope.data读取的函数。

尝试此操作不会执行任何操作，也不会引发错误。这让我想知道我是否以错误的方式做这件事。

为清楚起见，我创建了一个plunker。记得打开控制台。

Answer 1

使用@代替=，然后使用scope[scope.fx]创建属性：

app.directive('mydirective', function() {
   return {
     restrict: 'A',
     scope: {
       data: '=mydirectiveData',
       fx: '@mydirectiveFx'
     },
     link: function(scope, element, attrs) {
        scope[scope.fx] = function () { console.log(scope.data); };
      }
     }
   }
);

http://plnkr.co/edit/a2c14O?p=preview

在指令中，处理对用户定义的方法名称的调用

1 个答案: