添加 angularjs 后 Salvatore 网格停止工作

Question

当我将 angularjs 添加到我的项目时，Salvattore grid 停止工作，它没有渲染。

我想使用 ng-repeat 功能循环遍历所有项目并将它们显示在 Salvatore 网格中。

是什么原因造成的？谢谢

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

哦，这是密码笔：http://codepen.io/anon/pen/jBrVpm

Answer 2

我已经添加了 Chanthu 编写的指令（以及 html 中的 attr），ng-if="array.length>0" 为我工作。