1

我正在制作一个 Angular 应用程序。我希望主菜单看起来像 Windows 8 中的图块。现在我想要一种算法，它会自动为某些图块比其他图块大的图块生成图案。

所以基本上我想创建一个组件，我将提供一个数据源作为包含菜单项的 Json 对象数组。

然后组件应该以一种可以容纳所有瓷砖的方式布置瓷砖。

我应该怎么做？

我正在学习angularjs。我可以避免使用 jQuery 插件而不使用它吗？

4

2 回答 2

3

我不确定你是否可以在没有外部 JS 库（mansory、isotope）的情况下处理这个问题。但是你可能会踏入另一个陷阱。Angular 将用 Promise 填充你的 DOM，而不是 tile。麻烦的是 Mansory/Isotope 正在尝试（重新）计算新布局，而无需所有数据（宽度、高度）。您应该使用 $timeout 将 Angular 范围与外部库同步。

isotopeApp.directive('isotope', function ($timeout) {
return {
    link: function (scope, element, attrs) {
        scope.$on('postAdded', function () {
            $timeout(function () {
                element.isotope('reloadItems').isotope({
                    sortBy: 'original-order'
                });
            })
        })
    }
};

});

http://jsfiddle.net/8Qmry/

于 2013-06-10T08:07:06.107 回答
2

在这里聚会迟到了，但是如果您不希望 DOM 散布着一大堆不必要的摘要周期并加快了效果的反应性，那么在超时中添加“false”可以阻止摘要周期变得疯狂和更大的数据集，以指数方式加快速度：

isotopeApp.directive('isotope', function ($timeout) {
    return {
        link: function (scope, element, attrs) {
            scope.$on('postAdded', function () {
                $timeout(function () {
                    element.isotope('reloadItems').isotope({
                        sortBy: 'original-order'
                    });
                }, false)
            })
        }
    };
});

变化不大，但性能大幅提升。

于 2016-02-22T09:00:53.657 回答