Javascript 让有棱角的砖石工作，它说它没有办法'；图像标记'；
我试图通过passy使用无限滚动指令，但我遇到了一些问题。我正在用plnkr做这件事。它在控制台中显示为一个错误，TypeError:Object[Object Object]没有“imagesLoaded”方法 这是我的htmlJavascript 让有棱角的砖石工作，它说它没有办法'；图像标记'；,javascript,angularjs,angularjs-directive,jquery-masonry,Javascript,Angularjs,Angularjs Directive,Jquery Masonry,我试图通过passy使用无限滚动指令，但我遇到了一些问题。我正在用plnkr做这件事。它在控制台中显示为一个错误，TypeError:Object[Object Object]没有“imagesLoaded”方法 这是我的html <!DOCTYPE html> <html> <head> <script data-require="angular.js@*" data-semver="1.2.13" src="http://code.an
<!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>
触发元件
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);
}
});
}
};
});
var myApp=angular.module（'myApp'，['wu.massy']）；
myApp.controller（'DemoController'，函数（$scope）{
$scope.images=[
{num:1，高度：400}，{num:2，高度：250}，
{num:3，高度：225}，{num:4，高度：200}，
{num:5，高度：200}，{num:6，高度：225}，
{num:7，高度：300}，{num:8，高度：250}，
{num:9，高度：275}，{num:10，高度：350}，
{num:11，高度：450}，{num:12，高度：275}，
{num:13，高度：225}，{num:14，高度：250}，
{num:15，高度：250}，{num:16，高度：225}]
$scope.loadMore=函数（）{
var last=$scope.images[$scope.images.length-1].num；
变量高度=[200225250275300350400450]
变量颜色=[“859994”、“51C0C4”、“C3D9C6”、“EBE2C7”、“F5E6D3”]
var textColor=“ffffff”；
对于（变量i=1；即offset（）.top）{
作用域：$apply（属性滚动触发器）；
}
});
}
};
});
谢谢，对不起，我是angular的新手。您应该在angular之前加载jQuery，我还使用了较新版本的Massy（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>
非常感谢，这工作做得很好。但有一个问题是，为什么jQuery在前面。Angular不依赖于jQuery，对吗？我更新了答案。Angular不依赖于jqeury，但jqLite可以被jQuery覆盖，当您使用jQuery插件时，您可能需要它。太棒了，我正在使用Angular Sotox和Angular masonty获得相同的示例，我将Angular移动到了jQuery下面，这个示例也很好。这就解释了为什么会这样。再次感谢。谢谢你的回答，我认为angular Massey项目应该更清楚地列出依赖项，因为它只是说加载js文件，但没有关于包含Massey本身或jQuery的信息
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;
}