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"对我有用。

添加angularjs后，Salvattore网格停止工作

2 个答案: