Question

我是AngularJS的新用户，我用它来构建照片库。我也尝试使用角同位素进行布局，但我无法使其正常工作。

我已经包含了同位素和角同位素JS文件：

<script src="bower_components/outlayer/item.js"></script>
<script src="bower_components/outlayer/outlayer.js"></script>
<script src="bower_components/masonry/masonry.js"></script>
<script src="bower_components/isotope/js/item.js"></script>
<script src="bower_components/isotope/js/layout-mode.js"></script>
<script src="bower_components/isotope/js/isotope.js"></script>
<script src="bower_components/isotope/js/layout-modes/vertical.js"></script>
<script src="bower_components/isotope/js/layout-modes/fit-rows.js"></script>
<script src="bower_components/isotope/js/layout-modes/masonry.js"></script>
<script src="bower_components/angular-isotope/dist/angular-isotope.js"></script>

以下HTML标记：

<div isotope-container ng-cloak id="isotopeContainer" class="isotope stream ng-cloak" ng-controller="PhotosCtrl">
   <article isotope-item class="photo" ng-repeat="photo in photosList">
      <a no-click href="#">
         <img lazyload ng-src="images/transparent.gif" data-original="{{photo.url}}" alt="{{photo.title}}">
      </a>
   </article>
</div>

我的photo.js（控制器）：

'use strict';

angular.module('ng1stApp')
  .controller('PhotosCtrl', function ($scope, $http) {
    $http.get('/api/photosList').success(function(photosList) {
        $scope.photosList = photosList;
    });
  })
    .directive('lazyload', function($timeout) {
    return {
      restrict: 'A',
      link: function (scope, element) {
        $timeout(function() {
          $(element).lazyload({
            effect: 'fadeIn',
            effectspeed: 500,
            'skip_invisible': false
          });
        }, 0);
      }
    };
  })
    .directive('noClick', function() {
        return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        angular.element(element).on('click',function(event){
          event.preventDefault();
          console.log('links are disabled');
        });
      }
    };
});

但没有运气。我错过了什么？我在http://mankindsoftware.github.io/angular-isotope/查看了示例，但我无法找到解决方案。

Answer 1

我知道这是一个老线程，但我在搜索其他内容时遇到了它。我想我刚刚处理了与你相同的问题，并通过添加iso.directives作为依赖来解决它：

var app = angular.module('MyApp', [
   'iso.directives'
]);

希望它有所帮助。

无法使角同位素适用于我的布局

1 个答案: