jQuery在我的Angular.js網站上無法正常工作

Question

我正在嘗試讓Masonry.js在我的網站上運行，盡管我成功地做到了，但它是一個超級hacky解決方案，我不知道為什么會起作用（而且效果不佳）。

我的兩個主要問題是：
jQuery無法正常工作
它僅與setTimeout一起使用（否則，元素彼此堆疊，因為圖像在加載之前沒有高度）

這是我的代碼：（或在github上查看）

masonryStyle.js（此文件確實很奇怪。jQuery僅在存在該確切功能的情況下才起作用。刪除任何部分並會中斷）

setTimeout(function() {
var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
    itemSelector: '.grid-item'
});
}, 500);

$('.grid').masonry({
columnWidth: '.grid-sizer',
itemSelector: '.grid-item',
percentPosition: true
});

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}}&nbsp;     </div>
</div>
</div>

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>

Answer 1

嘗試使用此角度化的砌體版本： https ： //github.com/passy/angular-masonry
某些jQuery起源在Angular.js應用程序中造成問題，否則，如果要使用jQuery，則必須在每次更改路線時加載所有jQuery函數

例如：

$rootScope.$on('$viewContentLoaded', function(event) {
      $('#side-menu').metisMenu();
  });`

您必須像上面那樣做。

jQuery在我的Angular.js網站上無法正常工作

問題描述

1 個解決方案

解決方案1
0

jQuery在我的Angular.js網站上無法正常工作

問題描述

1 個解決方案

解決方案1 0

解決方案1
0