Question

我有一个指令，当用户将鼠标悬停在新闻上时，使新闻项目具有类似usatoday.com的效果。我是angularjs的新手：D

指令：

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

        }
    };
}]);

查看：/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>

在Home.html上:(已与控制器绑定）

<div hot-event></div>

当我不绑定来自控制器＆lt; li ng-repeat="news in featuredEvents">的数据时它起作用，现在效果不会显示出来。 Console.log显示0错误。

更新：我最终使用了文档准备

   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

如果您调试代码，您会发现您的指令没有找到任何元素。

这是因为当模板加载时，指令链接函数被调用，但是ng repeat没有时间自己填充它（它从空开始），因为它没有找到的位置。

一个简单的解决方法是在setTimeout 0函数中使用jquery find方法，或者对执行jquery查找的函数使用$ scope.evalAsync（它需要角度为1.3）。

但最好的解决方案是将代码修复为实际上不需要jquery。

P.S。当你在指令中看到自己使用选择器时，你通常会在角度上做错事（注意：通常），请参考这个"Thinking in AngularJS" if I have a jQuery background?很棒的问题和答案。请注意，他实际上说当你第一次学习角度时，根本不要使用jquery：）

angularjs指令调用图像效果脚本

1 个答案: