4

我目前正在参与一项使用 wookmark 插件和 angularjs 创建像缩略图这样的 pinterest 的任务。我可以使用 $timeout 10 秒来显示缩略图,因为服务器需要时间来响应。我想在数据完全加载后调用布局。我已经尝试过承诺但没有运气。

有什么方法可以在不使用 $timeout 的情况下调用 Wookmark 布局?

我的代码如下:

myApp.controller("MyCtrl", ['$scope', '$timeout', 'eventData', function($scope,  $timeout, eventData) {
    function init() {
        $scope.publicstreams = [];
        $scope.publicstreams = eventData.getEvent(0);
        $timeout(initWookmark, 10000);
    }

    function initWookmark() {
        var options = {
            autoResize: true, // This will auto-update the layout when the browser window is resized.
            container: $('#tiles'), // Optional, used for some extra CSS styling
            offset: 5, // Optional, the distance between grid items
            flexibleWidth: 310 // Optional, the maximum width of a grid item
        };
        var handler = $('#tiles li');
        $('#tiles').imagesLoaded(function() {
            // Prepare layout options.
            // Get a reference to your grid items.
            // Call the layout function.
            handler.wookmark(options);
        });
        handler.wookmark(options);
    }
    init();
}]);

任何帮助将不胜感激!

4

1 回答 1

2

感谢上帝!

最后我自己弄清楚了。我在 $timeout 中将延迟设置为 0 并且它起作用了。

如何?

$timeout 实际上是在 DOM 在浏览器中完成渲染后执行的。因此,即使是 0 毫秒的延迟也有效。

于 2013-08-01T06:02:26.523 回答