通过Directive Angularjs的Link函数调用JQuery插件

时间:2016-06-20 12:39:29

标签: javascript jquery angularjs angularjs-directive

我不知道这个belove代码究竟发生了什么

模板:

<article class="thumb" ng-repeat="product in store.products">
    <a href="{{product.largeImg}}" class="image" ><img ng-src=" {{product.smallImg}}" alt="" /></a>
    <h2>{{product.index}}. {{product.title}}</h2>
    <p>{{product.desc}}</p>
</article>

指令

 mainApp.directive('contentdir', function () {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'template.html',
        controller: ['$scope', '$http', function ($scope, $http) {
                $scope.store = {};
                $http.get('/getTemplate').success(function (data) {
                    $scope.store.products = data;
                });
            }],
        link: function ($scope, $element, attr) {
        setTimeout(function () {$('#main').poptrox({
                    baseZIndex: 20000,
                    /*options of poptrox*/
                });
            }, 10);
        }
    };
});

HTML

    <div id="main">
            <contentDir></contentDir>
    </div>

如果我在链接功能中删除了setTimeout,则代码无效。可以向我解释AngularJs使用此代码的内容。非常感谢你。

1 个答案:

答案 0 :(得分:0)

您应该使用$timeout提供者而不是setTimeout,请参阅:http://www.codelord.net/2015/10/14/angular-nitpicking-differences-between-timeout-and-settimeout/

TL; DR;

Angular不知道&#34;知道&#34;在setTimeout内发生了什么,如果你使用$setTimeout,那么回调将在Angular的摘要周期内调用。

编辑:我想念你的问题。

无论哪种方式你应该使用$timeout,你需要$timeout的原因是因为你需要角度来创建一个单独的摘要周期,如果你让代码同步运行,它就不会因为Angular不会意识到这种变化。通常你会发现这个:

$timeout(function(){
  // do something I want angular to be aware of. i.e.: a jQuery plugin
}, 0);