在指令定義中的其他指令內添加指令

當試圖將指令相互嵌套或者說得更好時，我的思想融化：在另一個指令的定義內重新使用現有指令。在指令定義中的其他指令內添加指令

說我有一個現有的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

是的，它會工作得很好，除了在某些設備上有一個300毫秒的延遲很容易解決。 –

在指令定義中的其他指令內添加指令

回答

相關問題