Salvattore grid stopped working after adding angularjs

Question

When I added angularjs to my project, Salvattore grid stopped working, it's not rendering.

I want to use ng-repeat functionality to loop through all the items and display them in Salvattore grid.

What can cause this? Thanks

Answer 1

Ok looks like what's happening is, Salvattore assumes that the elements it needs to apply masonry layouts are present in the dom by the time you add data-columns attribute and of course this wont work because ng-repeat takes a digest cycle to add the elements to dom.

One way to get around this is to create a custom directive that would initialise data-columns after elements are present in dom.

One quick way (probably not the most robust) would be to add that data-columns attribute after a digest cycle.

Here's an implementation:

 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> 

Here's the directive:

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);
    }
  };

});

Note: The directive is inspired by https://github.com/nathankot/angular-salvattore

Oh and here's the codepen: http://codepen.io/anon/pen/jBrVpm

Answer 2

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