Question

我试图通过passy来获取angular-masonry无限滚动指令，但我遇到了一些问题。我是在plnkr here中完成的。它在控制台中表示错误，TypeError：Object [object Object]没有方法'imagesLoaded'。

这是我的HTML

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="masonry@*" data-semver="2.1.0-7" src="//cdnjs.cloudflare.com/ajax/libs/masonry/2.1.07/jquery.masonry.min.js"></script>
    <script data-require="imagesloaded@*" data-semver="v3.0.2" src="http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="angular-masonry.js"></script>
    <script src="myApp.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="DemoController">
    <div masonry="">
      <img class="repeated-img masonry-brick" ng-repeat="image in images" ng-src="http://placehold.it/225x{{image.height}}/{{image.color.bg}}/{{image.color.text}}&text={{image.num}}" />
    </div>
    <div scroll-trigger="loadMore()" threshold="100">Trigger element</div>
  </body>

</html>

和我的无限滚动指令和app模块

var myApp = angular.module('myApp', ['wu.masonry']);
myApp.controller('DemoController', function($scope) {
  $scope.images = [
    {num: 1, height:400}, {num: 2, height:250}, 
    {num: 3, height:225}, {num: 4, height:200}, 
    {num: 5, height:200}, {num: 6, height:225}, 
    {num: 7, height:300}, {num: 8, height:250}, 
    {num: 9, height:275}, {num: 10, height:350}, 
    {num: 11, height:450}, {num: 12, height:275}, 
    {num: 13, height:225}, {num: 14, height:250}, 
    {num: 15, height:250}, {num: 16, height:225}]

  $scope.loadMore = function() {
    var last = $scope.images[$scope.images.length - 1].num;
    var heights = [200, 225, 250, 275, 300, 350, 400, 450]
    var colors = ["859994", "51C0C4", "C3D9C6", "EBE2C7", "F5E6D3"]
    var textColor = "ffffff";
    for(var i = 1; i <= 8; i++) {
      var randColor = colors[Math.floor(Math.random()*colors.length)];
      $scope.images.push({num: last + i, height: (heights[Math.floor(Math.random()*heights.length)]), color: {bg: randColor, text: textColor}});
    }
  };
});

myApp.directive('scrollTrigger', function($window) {
    return {
        link : function(scope, element, attrs) {
            var offset = parseInt(attrs.threshold) || 0;
            var e = jQuery(element[0]);
            var doc = jQuery(document);
            angular.element(document).bind('scroll', function() {
                if (doc.scrollTop() + $window.innerHeight + offset > e.offset().top) {
                    scope.$apply(attrs.scrollTrigger);
                }
            });
        }
    };
});

谢谢，对不起，但我很有棱角。

Answer 1

你应该在角度之前加载jQuery，我也使用更新版本的砌体（3.1.2），因为似乎imagesloaded依赖于更新的版本：

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.min.js"></script>
<script src="//desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="//code.angularjs.org/1.2.13/angular.js"></script>

来自angular.element(jqLite) docs：

如果jQuery可用，angular.element是jQuery函数的别名。如果jQuery不可用，angular.element委托给Angular的内置jQuery子集，称为“jQuery lite”或“jqLite”。

以下是源代码（https://github.com/angular/angular.js/blob/v1.2.13/src/Angular.js#L1257）：

function bindJQuery() {
  // bind to jQuery if present;
  jQuery = window.jQuery;
  // reset to jQuery or default to us.
  if (jQuery) {
    jqLite = jQuery;
    extend(jQuery.fn, {
      scope: JQLitePrototype.scope,
      isolateScope: JQLitePrototype.isolateScope,
      controller: JQLitePrototype.controller,
      injector: JQLitePrototype.injector,
      inheritedData: JQLitePrototype.inheritedData
    });
    // Method signature:
    //     jqLitePatchJQueryRemove(name, dispatchThis, filterElems, getterIfNoArguments)
    jqLitePatchJQueryRemove('remove', true, true, false);
    jqLitePatchJQueryRemove('empty', false, false, false);
    jqLitePatchJQueryRemove('html', false, false, true);
  } else {
    jqLite = JQLite;
  }
  angular.element = jqLite;
}

让角度砌体工作它说没有方法'imagesLoaded'

1 个答案: