Grid-A-Licious Grid 中的 ng-repeat答案

【问题标题】：ng-repeat within Grid-A-Licious GridGrid-A-Licious Grid 中的 ng-repeat
【发布时间】：2014-01-21 14:54:49
【问题描述】：

我正在使用 Grid-A-Licious 插件 (http://suprb.com/apps/gridalicious/)。

我的标记如下：

<h2 class="main-heading bottom-line"><span class="main-circle-icon"><i class="icon-building"></i></span>Properties Around you</h2>
<div class="featured-grid right-space">
    <div class="box-white">
        <div class="grid-item grid-style-properties">

            <div class="item" ng-repeat="m in map.dynamicMarkers">
                <a href="#" class="with-hover">
                    <div class="for_rent_banner"></div>
                    <img alt='images' src="data:image/png;base64,{{m.bigimage}}" width="200px" class="full" /><span class="mask_hover"></span>
                </a>
                <h4 class=" ">{{m.title}}</h4>
                <div class="preview-properties ">
                    <div class="box-detail">
                        <p class="text-center short-detail">
                            <span class="label"><i class="icon-circle-arrow-right"></i>Bath : 2</span>
                            <span class="label"><i class="icon-circle-arrow-right"></i>Beds : 2</span>
                            <span class="label"><i class="icon-circle-arrow-right"></i>Pool : 2</span>
                            <span class="price">$380,000</span>
                        </p>
                        <div class="clearfix">
                            <a href="#" class="btn-proper btn btn-small pull-left">See Detail</a>
                            <a href="#" class="btn-proper btn btn-small pull-right">Compare</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

正如您在网格内部看到的，我有一个绑定到我的视图模型的 ng-repeat 属性。

我遇到的问题是 Grid-A-Licious 需要在 document.ready() 上运行以下代码：

$(".grid-item").gridalicious({
        width: 250,
        gutter: 10,
        animate: true,
        effect: 'fadeInOnAppear'
    }); 

    $(".grid-galeries").gridalicious({
        width: 240,
        gutter: 10,
        animate: true,
        effect: 'fadeInOnAppear'
    });

我遇到的问题是我的网格内容绑定到我的视图模型，并且会根据其他条件动态变化（它实际上是服务调用的结果）。这会导致网格外观错误。

有什么办法，我可以调用上面的选择器，每次网格元素绑定的模型属性发生变化？这样做是否完全违反了 angularJS 的约定？

提前致谢

【问题讨论】：

标签： javascript jquery angularjs angularjs-ng-repeat

【解决方案1】：

您可以使用watch 来实现您的目标。但是，请注意，这应该在Directive 中处理，而不是在控制器中处理，但为了使这成为一个简短（更直接）的答案，我将使用控制器示例：

app.controller('myCtrl',['$scope',function($scope){
    "use strict";

    $scope.map.dynamicMarkers= [{ /*some object we do not know*/ }];

   $scope.$watch("map.dynamicMarkers",function(newValue, oldValue, scope){
       $(".grid-item").gridalicious({
         width: 250,
         gutter: 10,
         animate: true,
         effect: 'fadeInOnAppear'
       }); 

      $(".grid-galeries").gridalicious({
         width: 240,
         gutter: 10,
         animate: true,
         effect: 'fadeInOnAppear'
       });    
   },true);
}]);

免责声明：不建议从控制器修改视图，也不是“角度方式”。我认为这些动作应该移到指令中。

【讨论】：