angularjs - How to add a directive onto a node in an ng-repeat only once -
i have feature tour directive similar joyride works adding directive onto dom element highlights element during user walk through. example:
<button test-drive-step test-drive-text="to activate search click here" test-drive-next-label="next">search</button>
my question if want place on list of elements , point out single element using feature how that? example if node wanted place test-drive-step directive on in ng-repeat how limit directive 1 element out of items rather all?
for example,
<li ng-repeat="item in items" test-drive-step ...>{{item.name}}</item>
that place test-drive-step directive on every element in items, want on first element. how limit first element?
one option pass in conditional directive, telling whether apply itself.
for example can use $index === 0
test whether on first ng-repeat
element ($index
being ng-repeat element on). so
<li ng-repeat="item in items" test-drive-step="$index === 0" ...>{{item.name}}</item>
and add directive scope:
scope: { test-drive-step: '=' },
so directive can apply if attribute true
:
link: function(scope, element, attr) { if (scope.test-drive-step) element.addclass('blue'); // or whatever... }
here's fiddle showing concept: http://jsfiddle.net/6sc0acoa/2/
Comments
Post a Comment