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

Question

我不知道这个爱的代码到底发生了什么

模板：

<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 使用此代码的工作原理。非常感谢。

Answer 1

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

TL;DR;

Angular 不会“知道”setTimeout 内部发生的事情，如果您使用 $setTimeout，则该回调将在 Angular 的摘要循环中调用。

编辑：我错过了你的问题。

无论哪种方式你都应该使用$timeout，你需要$timeout的原因是因为你需要Angular来创建一个单独的摘要循环，如果你让代码同步运行，它不会像Angular那样工作请注意这种变化。通常你会发现：

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