AngularJS Directive ng-repeat first time element shown -
i want apply custom directive in ng-repeat on html element first time appears. further elements after first appearance not have directive or directive not enabled.
the element may not appear on first iteration of ng-repeat can't use $first.
i'm creating tutorial tooltip , want show on first visible element. underlying scope of ng-repeat has no knowledge of tutorial can't use it.
i think can write directive -
var app = angular.module('app', []) app.controller('homectrl', ['$scope', function($scope) { $scope.done = false; $scope.items = [{ name: 'one' }, { name: 'two' }, { name: 'three', special: true }, { name: 'four', special: true }, { name: 'five', special: true }]; } ]); app.directive('special', function() { return { scope: false, restrict: 'a', link: function(scope, element, attrs) { if (scope.item.special && !scope.$parent.$parent.done) { scope.done = true; scope.$parent.$parent.done = true; } }, template: "<p ng-class='{active: item.special && this.done}'>{{ item.name }}</p>" }; });.active { color: red; }<!doctype html> <html ng-app="app"> <head> <title>demo</title> </head> <body ng-controller="homectrl"> <li ng-repeat="item in items track $index" special="" item="item" done="done">{{ item.name }}</li> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> </body> </html>update
so, phew! got work if @ directive you'll see i'm playing around parent scopes using $parent attribute.. don't have better solution now. :(
hope helped!
Comments
Post a Comment