如何在AngularJS指令中正確包裝一次jquery調用？

我有一個簡單的指令，其將如何在AngularJS指令中正確包裝一次jquery調用？

<a caracteristic="caracteristics.strength"></a>

與正確的價值觀比較詳細的標籤：

template.html

<a ng-href="regles#{{ caracteristic.name | lowercase }}" class="ui mini {{ caracteristic.color }} label" data-title="{{ caracteristic.name }}" data-content="{{ caracteristic.description }}">{{ caracteristic.name | uppercase}}</a>

這裏的指令：

'use strict'; 

angular.module('myApp') 
    .directive('caracteristic', function() { 
     return { 
      templateUrl: 'components/caracteristic/caracteristic.html', 
      restrict: 'EA', 
      scope: { 
       caracteristic: '=' 
      }, 
      replace: true, 
      link: function() { 
       $('.mini.label').popup({ 
        transition : 'fade up', 
        variation : "large" 
       }); 
      } 
     }; 
    });

所以基本上我的模型不會改變，如果我用我的指令渲染兩個標籤$（...）。popup將被調用兩次。

我怎樣才能讓它加載一次？

PS：我是全新的angularJS，太新手了，現在將這個jQuery插件轉換爲本地Angular。如果我完全錯了，請讓我高興！ ;）

來源

2014-10-11 Arnaud Janssens

你指令一樣工作。 Angular指令提供了一些功能（在你的情況下，爲每個使用它們的實例調用'a'標籤並調用'$（'。mini.label'）。popup（）'）。如果使用它兩次，預期的行爲是你會彈出兩次。 – JME 2014-10-11 01:38:51

@JME：它正在工作，是的，但是'$（'。mini.label'）。popup（）'可以加載一次，只有在dom準備就緒的情況下才會這樣做。當只需要一次時，啓動並重新啓動並重新啓動此查詢呼叫是不是很難？ – 2014-10-11 01:42:42

我想我沒有清楚地解釋我的觀點。由於Angular指令爲每個使用它們的實例提供了一些可重複的功能，而這顯然不是你的意圖，那麼我想我的觀點是你不應該在這種情況下使用指令。 – JME 2014-10-11 04:04:25

彈出代碼看起來完全與你的caracteristic指令分開，所以我不確定爲什麼你把它放在第一位。你應該尋求建立一個彈出指令：

app.directive('popup', function() { 
    return function (scope, elem) { 
     elem.popup({ 
      transition : 'fade up', 
      variation : "large" 
     }); 
    }; 
});

然後附上您要彈出的元素：它應該

<div popup class="mini label"></div>

來源

2014-10-13 14:58:18 noj

如何在AngularJS指令中正確包裝一次jquery調用？

回答

相關問題