我正在尝试获取 angular-masonry通过 passy 使用无限滚动指令，但我遇到了一些问题。我在 plnkr here 中做这件事.它在控制台中显示为错误，TypeError: Object [object Object] has no method '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>
还有我的无限滚动指令和应用模块
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);
}
});
}
};
});
谢谢，抱歉，但我是 Angular 的新手。
最佳答案
你应该在 angular 之前加载 jQuery，我也使用了较新版本的 masonry (3.1.2)，因为它似乎加载的图像依赖于较新的版本:
<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 :
If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery, called "jQuery lite" or "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;
}
关于javascript - 让 angular-masonry 工作它说它没有方法 'imagesLoaded'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21962972/
我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div
总的来说，我对ruby还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc
我正在尝试设置一个puppet节点，但rubygems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由rubygems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby
我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou
我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t
我想了解Ruby方法methods()是如何工作的。我尝试使用“ruby方法”在Google上搜索，但这不是我需要的。我也看过ruby-doc.org，但我没有找到这种方法。你能详细解释一下它是如何工作的或者给我一个链接吗？更新我用methods()方法做了实验，得到了这样的结果:'labrat'代码classFirstdeffirst_instance_mymethodenddefself.first_class_mymethodendendclassSecond使用类#returnsavailablemethodslistforclassandancestorsputsSeco
我好像记得Lua有类似Ruby的method_missing的东西。还是我记错了？ 最佳答案 表的metatable的__index和__newindex可以用于与Ruby的method_missing相同的效果。 关于ruby-难道Lua没有和Ruby的method_missing相媲美的东西吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/7732154/
我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer