Question

在尝试将指令嵌套到彼此或更好地说明时，我的思绪正在融化：在另一个指令的定义中重用现有指令。

假设我有一个像这样的现有HTML标记：

<a class="class1 class2" href="#link1" data-important="data1">Test</a>

我现在想要使用自定义指令myDirective向该现有标记添加新功能：

<a class="class1 class2" href="#link1" data-important="data1" my-directive>Test</a>

myDirective的作用并不重要，但我想重新使用ngClick功能。通常我会用新模板替换标记，但我事先并不知道所有类，属性等。我真正需要的是一种追加 ngClick的方法。我试过这样的东西，但它不起作用：

// inside myDirective
compile: function (element, attrs) {
  element.attr('ng-click', 'customFunction()');
}

所以我现在就这样做了：

// inside myDirective
link: function(scope, element, attrs, someCtrl) {
  element.bind('click', function() {
    someCtrl.customFunction();
    scope.$apply();
  });
}

这可行，但

我需要致电scope.$apply();
以这种方式模仿ngClick是好的，但我无法重用更复杂的指令。

任何帮助？

Answer 1

你必须像这样重新编译整个元素：

directive('myDirective', ['$compile', function($compile){
    return{
        compile: function (element, attrs) {
           return {
               pre: function($scope, $element, $attrs){
                  if(typeof $attrs.ngClick === "undefined"){
                      $element.attr('ng-click', 'customFunction()');
                      $compile($element)($scope);
                  }
               }
           };
        }
    };
}]);

Answer 2

您尝试的第一种方法不起作用，因为角度需要编译才能识别指令。您尝试的第二种方式非常常规，但您不必使用scope.$apply()，具体取决于您正在做的事情。

此外，设置ng-click的属性然后重新编译会有一点风险，因为使用您的指令的人不会知道它会覆盖他们稍后添加的ng-click。 @ kamilkp的答案阻止了这一点，但那意味着customFunction也不会触发。它还意味着对元素及其附加的任何指令进行双重编译。

如果您只是附加了点击处理程序，除了customFunction触发之外，还可以对该元素进行ng-click。

在指令定义中的其他指令中添加指令

2 个答案: