Question

我正在制作Angular App。我希望主菜单看起来像Windows 8中的磁贴。现在我想要一个算法，它会自动生成一个瓷砖图案，其中一些瓷砖比其他瓷砖大。

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

然后组件应该以适合所有组件的方式布局切片。

我应该怎么做？

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

Answer 1

如果没有外部JS库（mansory，isotope），我不确定你能不能解决这个问题。但是你可能会陷入另一个陷阱。 Angular将使用promises填充你的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/

Answer 2

来到这里的派对迟到了，但是如果你不想让DOM充斥着大量不必要的消化周期并加快效果的反应性，那么就加入“假”。到超时会停止消化周期的疯狂和更大的数据集，从而加速指数：

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

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

基于菜单项生成Metro UI样式的算法？

2 个答案: