【问题标题】:Unable to use Angular Masonry无法使用角砌体
【发布时间】:2015-05-04 12:16:25
【问题描述】:

我已经尝试将 Angular Masonry 与他们的自定义指令一起使用,但没有成功。我在控制台中遇到错误,例如:

TypeError: b.masonry 不是函数

我已经加载了 Angular 脚本文件以及 Angular Masonry,加载了图像。

我的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 没有对它们做任何事情。我在这里做错了什么?

【问题讨论】:

    标签: javascript angularjs angularjs-directive jquery-masonry


    【解决方案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。 Browserify 依赖项 这是首选方法,但需要您设置适当的构建工具。您可以在 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');
    

    【讨论】:

      【解决方案2】:

      我遇到了同样的错误,https://github.com/passy/angular-masonry/issues/135#issuecomment-192242230 评论让我意识到我需要在我的脚本订单中首先添加 jquery-bridget..

      解决了这个错误

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-05-06
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多