以 angularjs 方式使用 ng-repeat 网格化 licious答案

【问题标题】：grid a licious with ng-repeat in angularjs way以 angularjs 方式使用 ng-repeat 网格化 licious
【发布时间】：2014-04-08 05:39:34
【问题描述】：

<div id="container">
        <div ng-repeat="itm in items" class="item">
            <div>
                <span>{{itm.name}}</span>
                <ul>
                    <li ng-repeat="i in itm.grouped">
                       <span>{{i.spName}}</span> 
                    </li>
                </ul>
            </div>
        </div>
    </div>

查看已编译并附加到 jqueryui 选项卡的源代码，如下所示

<html><body>
 <div id="innerPageContent" ng-show='UI.showTabs'>
        <div id="tabs" tabs>
            <ul id="tabs_ul">
            </ul>
        </div>
    </div></body></html>

调用控制器

  $scope.$watch("items", function (newValue, oldValue, scope) { 
        $("#container").gridalicious({
            width: 250
        });
    });

脚本完成功能运行，但似乎没有任何变化找不到动态内容？

【问题讨论】：

这里没有 grid-a-licious 的迹象，您能否提供一个 plnkr 显示您尝试过的内容？
你在哪里给.gridalicious()打电话？在这里检查一下，也许你会知道如何打电话给.gridalicious(),stackoverflow.com/questions/21261515/…
控制台有错误吗？重新检查gridalicious lib 是否已加载到您的页面中
没关系，我已经完成了

标签： jquery angularjs ng-repeat

【解决方案1】：

试试：

App.directive('onLastRepeat', function() {
    return function(scope, element, attrs) {
        if (scope.$last)
            setTimeout(function() {
                scope.$emit('onRepeatLast', element, attrs);
            }, 1);
    };
});
App.controller('someController', function($scope) {
    $scope.$on('onRepeatLast', function(scope, element, attrs) {
        $("#container").gridalicious({
            selector: ".item"
        });
    });
};

HTML 中的与：

<div id="container">
    <div ng-repeat="itm in items" class="item" on-last-repeat>
         <div>
           <span>{{itm.name}}</span>
             <ul>
               <li ng-repeat="i in itm.grouped" >
                      <span>{{i.spName}}</span> 
                 </li>
         </ul>
          </div>
     </div>
</div>

这在我的项目中对我有用，基本上你需要在所有元素都被渲染后调用 $("#container").gridalicious()

【讨论】：