如何在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调用？

回答

相关问题