2015-05-04 62 views
1

我試過使用角砌體與他們的自定義指令,但一直沒有成功。我在控制檯出現錯誤,如:無法使用角砌體

TypeError: b.masonry is not a function

我有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,但砌體沒有做與他們任何事情。我在這裏做錯了什麼?

回答

1

角砌體依賴於很多其他節點模塊。如果您使用npm/bower安裝軟件包,那麼相關性已經被下載。您仍然將它們包含在index.html中,或將它們全部瀏覽到您的捆綁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');