添加angularjs后Salvattore网格停止工作

Question

当我向项目中添加angularjs时， Salvattore网格停止工作，但未渲染。

我想使用ng-repeat功能来遍历所有项目并将其显示在Salvattore网格中。

是什么原因造成的？ 谢谢

Answer 1

好的情况似乎是发生了什么，Salvattore假定在您添加data-columns属性时，dom中已经存在需要应用砌体布局的元素，这当然不起作用，因为ng-repeat需要一个摘要周期来添加元素到dom。

解决此问题的一种方法是创建一个自定义指令，该指令将在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

我添加了Chanthu编写的指令（以及html中的attr），并且ng-if="array.length>0"对我ng-if="array.length>0" 。