jquery - 以 AngularJS 方式使用 ng-repeat 进行网格化-6ren

jquery - 以 AngularJS 方式使用 ng-repeat 进行网格化

转载作者：行者123 更新时间：2023-12-01 05:50:21

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

调用 Controller

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

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

最佳答案

尝试:

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

关于jquery - 以 AngularJS 方式使用 ng-repeat 进行网格化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22928398/