Javascript jQuery不是';在Angular.js网站上无法正常工作
我正在尝试让massy.js在我的网站上运行,虽然我已经成功了,但这是一个超级黑客解决方案,我不知道为什么它会运行(而且运行不好) 我的主要两个问题是:Javascript jQuery不是';在Angular.js网站上无法正常工作,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我正在尝试让massy.js在我的网站上运行,虽然我已经成功了,但这是一个超级黑客解决方案,我不知道为什么它会运行(而且运行不好) 我的主要两个问题是: jQuery工作不正常 它只适用于setTimeout(否则元素会相互堆叠,因为在加载之前图像没有高度) 这是我的代码:(或查看) masonryStyle.js(这个文件真的很奇怪。jQuery只有在确切的函数存在的情况下才能工作。删除任何部分,它就会崩溃) home.html(需要删除的内容) <div class = "search
jQuery工作不正常
它只适用于setTimeout(否则元素会相互堆叠,因为在加载之前图像没有高度) 这是我的代码:(或查看) masonryStyle.js(这个文件真的很奇怪。jQuery只有在确切的函数存在的情况下才能工作。删除任何部分,它就会崩溃) home.html(需要删除的内容)
<div class = "searchBar">
<form ng-submit = "searchAuthor()" class = "searchSection">
<input type = "text" class = "searchInput" ng-model = "byAuthor" placeholder = "Search Authors">
<input type = "submit" class = "searchSubmit" value = "Search">
</form>
<div class = "spacer"></div>
<form ng-submit = "searchTag()" class = "searchSection">
<input type = "text" class = "searchInput" ng-model = "byTag" placeholder = "Search Tags">
<input type = "submit" class = "searchSubmit" value = "Search">
</form>
</div>
<div class = "grid">
<div class = "grid-item" ng-repeat = "image in images">
<img ng-src = "{{image.link}}" class = "image">
<div class = "imageTitle">{{image.title}}</div>
<div class = "imageAuthor">Posted by: {{image.author}}</div>
<div class = "imageUpvote"><a href ng-click = "upvote(image)"><i class="fa fa-thumbs-o-up"></i></a> {{image.upvotes}}</div>
<div class = "imageTags" ng-repeat = "tag in image.tags">{{tag}} </div>
</div>
</div>
{{image.title}
发布人:{{image.author}
{{image.upvows}
{{tag}}
index.ejs
<!DOCTYPE html>
<html>
<head>
<title>Pin Viewer</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<link href='https://fonts.googleapis.com/css?family=Quicksand:400,300' rel='stylesheet' type='text/css'>
</head>
<body ng-app = "app" ng-controller = "MainCtrl">
<div class = "pageWrapper">
<div class = "mainPage">
<div class = "navBar">
<a href = "#/profile"><div class = "appName">{{user.username}}</div></a>
<a href = "/login/twitter/"><div class = "navButton" ng-hide = "user.username">Log In</div></a>
<a href ng-click = "logout()"><div class = "navButton" ng-show = "user.username">Log Out</div></a>
</div>
<div class = "pageTitle"><a href = "#/">Pin Viewer</a></div>
<div class = "postImage">
<button class = "postImageButton" ng-click = "postImage()">Post Image</button>
</div>
<div class = "error">{{error}}</div>
</div>
<div class = "pageContent">
<ui-view></ui-view>
</div>
</div>
<script src="javascripts/jquery-1.11.3.js"></script>
<script src='javascripts/masonry.pkgd.js'></script>
<script src='javascripts/angular.min.js'></script>
<script src='javascripts/angular-ui-router.js'></script>
<script src="javascripts/angularApp.js"></script>
</body>
</html>
Pin查看器
后像
{{error}}
试试这个有角度的masonary版本:一些jQuery源代码在Angular.js应用程序中会出现问题,否则,如果使用jQuery,则必须在每次路由更改时加载所有jQuery函数 例如:
$rootScope.$on('$viewContentLoaded', function(event) {
$('#side-menu').metisMenu();
});`
你必须像上面那样做
$rootScope.$on('$viewContentLoaded', function(event) {
$('#side-menu').metisMenu();
});`