jQuery не работает должным образом на моем сайте Angular.js

Я пытаюсь заставить Masonry.js работать на моем сайте, и, хотя я преуспел в этом, это супер хакерское решение, и я понятия не имею, почему он работает (и он не работает хорошо).jQuery не работает должным образом на моем сайте Angular.js

Мои главные два вопроса:
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 (содержание, которое должно быть MASONRY

<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>

источник

2015-12-10 Jordan.B

Попробуйте эту angularised версию masonary: https://github.com/passy/angular-masonry
Некоторые корни JQuery сделать проблему Угловое .js, иначе, если вы собираетесь с jQuery, вам нужно загрузить все функции jQuery при каждом изменении маршрута.

Например:

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

Вы должны сделать, как указано выше.

источник

2015-12-10 05:58:45

jQuery не работает должным образом на моем сайте Angular.js

ответ

Смежные вопросы