电网-A-Licious网格内的NG-重复 [英] ng-repeat within Grid-A-Licious Grid

问题描述

我使用网格-A-Licious插件（ http://suprb.com/apps/gridalicious/ ）。

I am using the Grid-A-Licious plugin (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属性。

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

我遇到的问题是，电网-A-Licious需要以下code要对跑的document.ready（）：

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.

有什么办法，我可以叫上面的选择，每次网格元素也必然改变模型属性？
而没有这样做完全违背angularJS约定？

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?

在事先非常感谢

推荐答案

您可以使用看来实现自己的目标。但是，请注意，这应该在指令，而不是在一个控制器，但让这个短（更直接的）答案，我将使用一个控制器样本进行处理：

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.

这篇关于电网-A-Licious网格内的NG-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！