Grid-A-Licious Grid內的ng-repeat

我正在使用Grid-A-Licious插件（http://suprb.com/apps/gridalicious/）。Grid-A-Licious Grid內的ng-repeat

我的標記如下：

<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屬性裏面看到的。

我遇到的問題是，電網-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約定嗎？

提前

來源

2014-01-21 Mick Walker

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

免責聲明：的修改不推薦從你的控制器來看，也不是「角度方式」。我認爲這些行動應該轉化爲指令。

來源

2014-01-21 15:07:22 Dalorzo

Grid-A-Licious Grid內的ng-repeat

回答

相關問題