通過指令Angularjs的Link函數調用JQuery插件

Question

我不知道這個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可以使用此代碼。 非常感謝。

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