Question

我有一个指令inner，我想将其包装到另一个指令comp中以隐藏内部指令的一些复杂性。＆＃34;小样＆＃34;定义应由＆＃34;内部＆＃34;执行的clickAction。指令。

现在我有一些麻烦正确绑定到＆＃34; clickAction＆＃34;来自comp指令的内部指令。

如果我明确地应用click-action="clickAction()"它的作品，但不希望以这种方式。

template: '<inner ng-model="data" click-action="clickAction()"></inner>',

我想我必须添加一些＆＃34;魔法＆＃34;在link函数中绑定到clickAction

Plunker：http://plnkr.co/edit/AXf1oL?p=preview

1）我如何实现这个（简单）场景。 2）这是＆＃34;包装＆＃34;内部指令？

Answer 1

你应该将clickAction与另一个函数包含在“内部”指令范围内。

Comp指令没有变化。

app.directive('comp', [function() {
    return {
        scope: {
            data: '=ngModel'
        },
        restrict: 'AE',
        template: '<inner ng-model="data" click-action="clickAction()"></inner>',
        link: function(scope, ele, attrs) {
               scope.clickAction = function() {
                alert('click');
            };
        }
    };
}]);

inner指令应具有与“clickAction”不同名称的函数，该函数调用此操作：

app.directive('inner', [function() {
    return {
      scope: {
          data: '=ngModel',
          clickAction: '&',
      },
      require: ['ngModel'],
      restrict: 'AE',
      //replace: true, // optional 
      template: '<div ng-click="onClick()">{{data.value}}</div',
      link: function(scope, ele, attrs) {
          scope.onClick = function(){
            alert('inner');
            scope.clickAction();  
          };
        }
  };
}]);

Plunkr：http://plnkr.co/edit/Y9OoK0tGqTWlXNFEZuDr?p=preview

如果要在函数之间传递参数，可以使用：

模板：

template: '<inner ng-model="data" click-action="clickAction(params)"></inner>',

点击操作：

scope.clickAction = function(params) {
    alert(params);
};

单击内部指令内的操作：

scope.onClick = function(){
    alert('inner');
    scope.clickAction({params: "yo dawg!"});  
};

广告。你的问题：我没有看到将指令放在指令内的任何错误。

修改

如果您不想定义click-action=clickAction()，则不应在inner指令中创建隔离范围。然后你的内部指令将使用outer指令的范围，你也不需要用另一个函数包装clickAction（）。

有这个解决方案的plunkr：http://plnkr.co/edit/jKg1R4Bn3TvZPOTLtLZn?p=preview

Angularjs指令：来自wrapped指令的绑定函数

1 个答案: