Question

我正在使用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'
    });

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

有什么办法，我可以调用上面的选择器，每次grid属性绑定的模型属性都会发生变化吗？这样做是否完全违背angularJS惯例？

非常感谢提前

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

免责声明：不建议您从控制器修改视图，也不建议使用＆＃34;角度方式＆＃34;。我认为这些行动应该转移到指令中。

Grid-A-Licious Grid中的ng-repeat

1 个答案: