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

当试图将指令相互嵌套或者说得更好时，我的思想融化：在另一个指令的定义内重新使用现有指令。在指令定义中的其他指令内添加指令

说我有一个现有的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，但我不能重复使用更复杂的指令。

任何帮助？

来源

2014-02-25 Pipo

你将不得不重新编译整个元素是这样的：

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

来源

2014-02-25 16:26:18 kamilkp

您尝试的第一种方式是行不通的，因为角度的需求来编译识别的指令。您尝试的第二种方法很常规，但您不应该使用scope.$apply()，这取决于您在做什么。

此外，设置ng-click的属性，然后重新编译会有点冒险，因为使用您的指令的用户不知道它会覆盖稍后添加的ng-click。 @ kamilkp的答案阻止了这一点，但那意味着customFunction也不会开火。它也意味着双重编译你的元素和附加到它的任何指令。

如果你只是附加点击处理程序，除了customFunction射击之外，ng-click仍然适用于该元素。

来源

2014-02-25 16:28:51

我标记@kamilkp答案作为接受的答案，因为我认为这在技术上是我的问题的正确答案。不过，你对我的情况提出了一些有效的观点。那么你会推荐做什么呢？我应该坚持我的“链接”功能吗？也许是重新使用'ngClick'的情况：如果我在项目中放置了'ngTouch'，它会用增强的行为来替代'ngClick'。这不适用于一个简单的'element.bind（'click''。或者我错了吗？ – Pipo

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

回答

相关问题