ng-repeat within Grid-A-Licious Grid

问题

I am using the Grid-A-Licious plugin (http://suprb.com/apps/gridalicious/).

My markup is as follows:

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

As you can see inside the grid I have a ng-repeat property which is bound to my view model.

The issue I am encountering, is that Grid-A-Licious requires the following code to be ran on document.ready():

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

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

The problem I am having is that the content of my grid is bound to my view model, and will change dynamically depending on other conditions (it is actually the result of a service call). This results in the grids appearance being wrong.

Is there any way, I can call the above selectors, each time the model property the grid elements are bound to changes? And does doing this totally go against angularJS conventions?

Many Thanks in advance

回答1:

You can use watch to achieve your goal. However, please note that this should be handled in a Directive and not in a controller but to make this a short(more direct) answer I will use a controller sample:

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

Disclaimer: The modification of the view from your controller is not recommended nor it is the "angular way". I think these actions should be moved into a directive.

来源：https://stackoverflow.com/questions/21261515/ng-repeat-within-grid-a-licious-grid