javascript - How to correctly wrap a one time jquery call inside an AngularJS directive? -

javascript - How to correctly wrap a one time jquery call inside an AngularJS directive? -

i have simple directive transforms

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

into more elaborated tag right values :

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>

here directive :

'use strict'; angular.module('myapp') .directive('caracteristic', function() { homecoming { templateurl: 'components/caracteristic/caracteristic.html', restrict: 'ea', scope: { caracteristic: '=' }, replace: true, link: function() { $('.mini.label').popup({ transition : 'fade up', variation : "large" }); } }; });

so model won't alter , if render 2 tag directive $(...).popup called twice.

how can create load 1 time ?

ps : i'm totally new in angularjs, novice convert jquery plugin native angular now. if i'm totally wrong, enlight me ! ;)

the popup code seems separate caracteristic directive, i'm not sure why you'd set there in first place. should looking create popup directive:

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

then attach element want popup:

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

javascript jquery angularjs angularjs-directive