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();

                });
            });
        }
    }
});

i just updated, even i use src="abc.jpg" and still no luck, really strange. — nam vo
– nam vo, Commented Oct 31, 2014 at 8:45
Where do you use the directive in your HTML? You didn't use hotevent inside of the code you posted. — yerforkferchips
– yerforkferchips, Commented Oct 31, 2014 at 8:49
If I understood correctly the directive it self is the view he posted (i.e. home/events.html) — PiniH
– PiniH, Commented Oct 31, 2014 at 8:53

Community · Accepted Answer · 2017-05-23 12:13:13Z

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 :)

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Oct 31, 2014 at 8:52

PiniH

1,93914 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nam vo Over a year ago

thanks for your input. I'll try to rewrite my directive to use with Template instead of templateurl.

Collectives™ on Stack Overflow

angularjs directive calls image effect script

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related