angularjsを追加した後にSalvattoreグリッドが機能しなくなった

Question

私のプロジェクトにangularjsを追加すると、Salvattoreグリッドが動作を停止しました。レンダリングされません。

ng-repeat機能を使用して、すべてのアイテムをループして、Salvattoreグリッドに表示したいと考えています。

これはどうしてですか？おかげ

Answer 1

オクラホマは何が起こっているかのようにされて見え、Salvattoreはng-repeatは、要素を追加するダイジェストサイクルがかかるため、それは石工のレイアウトを適用する必要がある要素は、あなたがこの文句を言わない仕事をdata-columns属性を追加し、もちろん時間によってDOMに存在していることを前提としていdomに。

これを回避する1つの方法は、要素が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ですされていますChanthuが書いたことを私は（htmlの内部およびattR）ディレクティブを追加しましたhttp://codepen.io/anon/pen/jBrVpm

Answer 2

と私のためにng-if="array.length>0"作品。