我正在尝试Masonry
作为 Angular 指令工作,该指令部分在线记录,尽管我在以下代码中遇到以下问题:
HTML 代码:
<div ng-controller="GridCtrl" class="grid-wrapper">
<div class="masonry">
<div ng-repeat="item in gridItems" ng-class="item.class">
<h3>{{item.name}}</h3>
<img ng-src="{{item.image}}"/>
<br>
<button ng-repeat="button in item.buttons">{{button.text}}</button>
</div>
</div>
</div>
角指令代码:
'use strict';
angular.module('HomeCourtArenaApp').directive('masonry', function ($parse) {
return {
restrict: 'AC',
link: function (scope, elem, attrs) {
elem.masonry({ itemSelector: '.masonry-item', columnWidth: $parse(attrs.masonry)(scope) });
}
};
});
angular.module('HomeCourtArenaApp').directive('masonryItem', function () {
return {
restrict: 'AC',
link: function (scope, elem, attrs) {
elem.imagesLoaded(function () {
elem.parents('.masonry').masonry('reload');
});
}
};
});
SCSS代码:
.grid-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: auto;
padding-left: 40%;
overflow-x: scroll;
overflow-y: hidden;
.masonry {
position: absolute;
width: 2600px;
max-height: 1080px;
.masonry-item,
.poster {
float: left;
width: 465px;
padding: 15px;
margin: 12px 12px 0 0;
box-shadow: 1px 1px 4px 3px rgba(55,55,55,0.25);
}
.masonry-item {
background: #fafafa;
height: 295px;
h3 {
width: 100%;
text-align: left;
font-size: 28px;
color: #3D444A;
display: block;
}
img {
display: block;
padding: 50px 0 10px;
margin: 0 auto;
}
}
.poster {
height: 631px;
background: #000;
position: relative;
h3 {
color: #fff;
font-family: 'adineuebold';
font-size: 68px;
position: absolute;
top: 410px;
left: 20px;
z-index: 2;
}
img {
position: absolute;
left: 0;
top: 0;
z-index: 1;
margin: 0;
padding: 0;
}
button {
position: absolute;
z-index: 2;
left: 20px;
top: 590px;
}
}
button {
padding: 12px 15px;
font-size: 15px;
margin-right: 10px;
font-family: 'adihausregular';
color: #fff;
text-transform: uppercase;
border: none;
background: linear-gradient(to bottom, rgba(57,134,202,1) 0%,rgba(3,75,146,1) 100%);
&:after {
content: "";
background: url('img/sprite.png') no-repeat -156px -9px;
width: 16px;
height: 16px;
margin-left: 30px;
display: inline-block;
}
}
}
}
然后,至关重要的是,我的脚本如何在我的索引文件中分层:
<script src="scripts/app.js"></script>
<script src="scripts/directives/masonry.js"></script>
<script src="scripts/controllers/main.js"></script>
我在控制台中不断收到一个错误,这表明我没有正确定义某处的砌体:
Uncaught TypeError: Cannot call method 'create' of undefined
然后还有:
TypeError: Object [object Object] has no method 'masonry'
谁能看到我哪里出错了?
我可能想避免使用 JQuery,因为有一个更新的 Masonry 不使用它。