angularjs directive calls image effect script

Question

I have a directive to make news item to have an effect like usatoday.com when user hover on the news. I'm new to angularjs :D

Directive:

    app.directive('hotEvent', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'EA',
        templateUrl: '/App/Main/views/home/events.html',
        link: function (scope, iElement, attrs) {
            //attrs references any attributes on the directive element in html

            var dathumb = $(iElement).find('.da-thumbs > li a');

            //$(function () {
            dathumb.each(function () {
                $(this).hoverdir();
            });
            //});

        }
    };
}]);

View: /App/Main/views/home/events.html

 <ul class="row da-thumbs">  
        <li ng-repeat="news in featuredEvents">   
            <a href="/">
                <img src="abc.jpg" />   >> no effect ???
                <div>
                    <h4>aaa</h4>
                    <p>
                       bbb
                    </p>
                </div>
            </a>
        </li>
         <li>                            
            <a href="/">
                <img src="abc.jpg" />    >> show effect
                <div>
                    <h4>bbb</h4>
                    <p>
                       ccc
                    </p>
                </div>
            </a>
        </li>
    </ul>

On Home.html: (which already binded with controller)

<div hot-event></div>

It works when i don't bind data from the controller <li ng-repeat="news in featuredEvents">, now the effect just doesn't show up. Console.log show 0 error.

UPDATED: i ended up using document ready

   app.directive('hotEvent', function () {
    return {
        restrict: 'EA',
        templateUrl: '/App/Main/views/home/events.html',
        link: function ($scope, iElement, attrs) {           

            angular.element(document).ready(function () {
                var dathumb = $(iElement).find('.da-thumbs > li a');

                dathumb.each(function () {
                    $(this).hoverdir();

                });
            });
        }
    }
});

Answer 1

If you debug your code you'd see that your directive didn't find any elements.

It happens because when the template loads, the directive link function gets called, but the ng repeat didn't have time to populate it self (it starts off empty), there for it's no where to be found.

An easy workaround is to use the jquery find method in a setTimeout 0 function, or use $scope.evalAsync on the function that does the jquery find (it requires angular 1.3).

But the best solution would be to fix the code to actually not require jquery.

P.s. when you see your self using selectors in a directive you are usually doing things wrong in angular (note: usually), please refer to this "Thinking in AngularJS" if I have a jQuery background? awesome question and answer. note that he actually says that when you first learn angular, don't use jquery at all :)