javascript - Grid-A-Licious Grid中的ng-repeat

我正在使用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约定？

提前谢谢了

最佳答案

您可以使用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);
}]);

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

关于javascript - Grid-A-Licious Grid中的ng-repeat，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21261515/