添加angularjs後，Salvattore網格停止工作

Question

當我將angularjs添加到我的項目中時，Salvattore網格停止工作，它不會呈現。

我想使用ng-repeat功能遍歷所有項目並在Salvattore網格中顯示它們。

這是什麼原因造成的？由於

Answer 1

好看起來像發生了什麼事是，Salvattore假設需要申請磚石佈局存在於由當時的DOM元素添加data-columns屬性，當然這不會工作，因爲ng-repeat需要一個消化週期中添加元素到了。

解決此問題的一種方法是創建一個自定義指令，在元素出現在dom中之後將初始化data-columns。

一個快速的方法（可能不是最強大的）將是在摘要週期後添加data-columns屬性。

下面是一個實現：

var app = angular.module('app', []); 
 
app.controller('grid', function($scope) { 
 
    $scope.data = [ 
 
     'test1','test2','test3','test4', 
 
     'test5','test6','test7' 
 
    ]; 
 
}); 
 

 
app.directive('salvattore', function($timeout, $window) { 
 
     return { 
 
     restrict: 'A', 
 
     link: function(scope, element, attrs) { 
 
      $timeout(function(){ //Hack to execute on next timeout 
 
      element.attr('data-columns', true); 
 
      $window.salvattore.register_grid(element[0]);    
 
      },0); 
 
     } 
 
     }; 
 
});

.grid[data-columns]::before { 
 
    content: '3 .col-4'; 
 
} 
 

 
.grid { 
 
    margin-bottom:50px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/salvattore/1.0.9/salvattore.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<div ng-app="app"> 
 
<div class="container" ng-controller="grid"> 
 

 
<h4>With angularjs</h4> 
 
<div class="row grid" salvattore> 
 
    <div class="entry" ng-repeat="e in data">{{e}}</div> 
 
</div> 
 
    
 
    
 
</div> 
 
</div>

這裏的指令：

app.directive('salvattore', function($timeout, $window) { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     $timeout(function(){ //Hack to execute on next timeout 
     element.attr('data-columns', true); 
     $window.salvattore.register_grid(element[0]);    
     },0); 
    } 
    }; 

}）;

注：該指令由https://github.com/nathankot/angular-salvattore

哦靈感，這裏的codepen：http://codepen.io/anon/pen/jBrVpm

Answer 2

我已經添加了指令（和attR內HTML）是燦寫和ng-if="array.length>0"爲我工作。