Question

我尝试过使用Angular Masonry和他们的自定义指令但是没有成功。我在控制台中遇到错误，例如：

TypeError：b.masonry不是函数

我在Angular Masonry中加载了Angular脚本文件，Image Loaded。

我的HTML

<div masonry column-width = "200">
    <div class="masonry-brick" ng-repeat="brick in bricks">
        <img ng-src="{{ brick }}" alt="A masonry brick">
    </div>
</div>

控制器：

var myApp = angular.module('myApp',['ngRoute','wu.masonry']);

myApp.controller('mainController',['$scope',function($scope){
    $scope.bricks = ['Images/Christina_Ysaguirre_Photography_Copyright_2015_(2).jpg',
                     'Images/Christina Ysaguirre Photography Copyright 2015  (3).jpg',
                     'Images/Christina Ysaguirre Photography Copyright 2015  (4).jpg',
                     'Images/Christina Ysaguirre Photography Copyright 2015  (5).jpg'
                    ];

}]);

图片正在加载html，但是Masonry没有对它们做任何事情。我在这里可以做错什么？

Answer 1

angular-masonry取决于很多其他节点模块。如果您使用npm / bower安装了软件包，则已经下载了依赖项。您仍然将它们包含在index.html中，或者将它们全部浏览到您的bundle js文件中。

<强> 1。包含在index.html方法中您可以添加以下行，并适当更改路径。

    <script src="/static/node_modules/angular-masonry/node_modules/masonry-layout/node_modules/fizzy-ui-utils/node_modules/desandro-matches-selector/matches-selector.js"></script>
    <script src="/static/node_modules/angular-masonry/node_modules/masonry-layout/node_modules/fizzy-ui-utils/node_modules/doc-ready/doc-ready.js"></script>
    <script src="/static/node_modules/angular-masonry/node_modules/masonry-layout/node_modules/fizzy-ui-utils/utils.js"></script>

    <script src="/static/node_modules/angular-masonry/node_modules/masonry-layout/node_modules/get-size/node_modules/desandro-get-style-property/get-style-property.js"></script>
    <script src="/static/node_modules/angular-masonry/node_modules/masonry-layout/node_modules/get-size/get-size.js"></script>

    <script src="/static/node_modules/angular-masonry/node_modules/masonry-layout/node_modules/outlayer/item.js"></script>
    <script src="/static/node_modules/angular-masonry/node_modules/masonry-layout/node_modules/outlayer/outlayer.js"></script>

<script src="/static/node_modules/angular-masonry/node_modules/masonry-layout/dist/masonry.pkgd.min.js"></script>

<强> 2。浏览器依赖这是首选方法，但需要您设置适当的构建工具。您可以在main.js中使用类似下面的内容，并将所有依赖项合并到一个包中。

require('angular-masonry/node_modules/imagesloaded/node_modules/eventie');
require('angular-masonry/node_modules/imagesloaded/node_modules/wolfy87-eventemitter');
require('angular-masonry/node_modules/imagesloaded');
require('angular-masonry/node_modules/jquery-bridget');
require('angular-masonry/node_modules/masonry-layout/node_modules/fizzy-ui-utils/node_modules/desandro-matches-selector');
require('angular-masonry/node_modules/masonry-layout/node_modules/fizzy-ui-utils/node_modules/doc-ready');
require('angular-masonry/node_modules/masonry-layout/node_modules/fizzy-ui-utils');
require('angular-masonry/node_modules/masonry-layout/node_modules/get-size/node_modules/desandro-get-style-property');
require('angular-masonry/node_modules/masonry-layout/node_modules/get-size');
require('angular-masonry/node_modules/masonry-layout/node_modules/outlayer');
require('angular-masonry/node_modules/masonry-layout');
require('angular-masonry');

Answer 2

我遇到了同样的错误，https://github.com/passy/angular-masonry/issues/135#issuecomment-192242230的评论使我意识到我需要在脚本顺序上首先添加jquery-bridget。.

那解决了这个错误

无法使用Angular Masonry

2 个答案: