1

Я пробовал использовать угловую кладку с их индивидуальной директивой, но не был успешным. Я получаю сообщение об ошибке в консоли, такие как:Невозможно использовать угловую кладку

TypeError: b.masonry is not a function

Я Угловые файлы сценарии, загруженных в моем вместе с угловым масонством, 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, но масонство ничего с ними не делает. Что я могу делать здесь неправильно?

ответ

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'); 
Смежные вопросы