我正在尝试使用cubeportfolio loadmore来处理angular指令,我已经让它工作以显示单个页面
控制器
(function() {
'use strict';
angular
.module('talents')
.controller('MyController', MyController);
MyController.$inject = ['UsersService'];
function MyController(UsersService) {
var vm = this;
vm.talents = [];
vm.loadTalents = loadTalents;
vm.query = {
query: ''
};
// SCOPE FUNCTIONS
function loadTalents() {
var query = {
limit: 5,
offset: vm.currentOffset
};
UsersService.get(query).$promise.then(
_successResponseHandle
);
}
function nextPage() {
loadTalents();
}
// PRIVATE FUNCTIONS
function _successResponseHandle(response) {
if (vm.talents.length === 0) {
vm.talents = response.docs;
} else {
vm.currentOffset += 1;
var newItems = response.docs;
vm.talents = vm.talents.concat(newItems);
}
}
function activate() {
vm.currentOffset = 1;
}
activate();
}
}());
指令
(function() {
'use strict';
/**
* Cube Portfolio Fullwidth Directive
*/
angular.module('core')
.directive('fullPageGallery', fullPageGallery);
fullPageGallery.$inject = ['$timeout'];
function fullPageGallery($timeout) {
var directive = {
retrict: 'EA',
link: link,
transclude: false,
scope: { data: '=' },
templateUrl: 'modules/talents/client/views/tpl/gallery.full.html'
};
return directive;
function link(scope, element, attrs) {
var options = {
filters: '#filters-container',
loadMore: '#loadMore-container',
loadMoreAction: 'click',
layoutMode: 'grid',
defaultFilter: '*',
animationType: 'fadeOutTop',
gapHorizontal: 0,
gapVertical: 0,
gridAdjustment: 'responsive',
mediaQueries: [{
width: 1600,
cols: 5
}, {
width: 1200,
cols: 4
}, {
width: 800,
cols: 3
}, {
width: 500,
cols: 2
}, {
width: 320,
cols: 1
}],
caption: 'zoom',
displayType: 'lazyLoading',
displayTypeSpeed: 100,
// lightbox
lightboxDelegate: '.cbp-lightbox',
lightboxGallery: true,
lightboxTitleSrc: 'data-title',
lightboxCounter: '<div class="cbp-popup-lightbox-counter">{{current}} of {{total}}</div>',
singlePageCallback: function(url, element) {
console.log(scope.data);
var t = this;
t.updateSinglePage(scope.data);
}
};
var e = angular.element(document.querySelector('#grid-container'));
$timeout(function() {
e.cubeportfolio(options);
}, 3000);
}
}
}());
查看
<div class="c-content-box c-size-md" ng-init="vm.loadTalents()" >
<div id="grid-container" class="cbp" data="vm.talents" full-page-gallery>
</div>
<div id="loadMore-container" class="cbp-l-loadMore-text">
<button ng-model="vm.currentOffset" ng-click="vm.loadTalents()" class="btn btn-danger c-btn-square c-btn-border-2x c-btn-bold c-btn-uppercase cbp-singlePageInline">
<span class="cbp-l-loadMore-defaultText">LOAD MORE</span>
<span class="cbp-l-loadMore-loadingText">LOADING...</span>
<span class="cbp-l-loadMore-noMoreLoading">NO MORE WORKS</span>
</button>
</div>
</div>
TPL
<div class="cbp-item" ng-repeat="d in data">
<a href="{{d.profileImageURL}}" class="cbp-caption cbp-lightbox">
<div class="cbp-caption-defaultWrap c-d-i-container">
<img src="{{d.profileImageURL}}" alt="">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignLeft">
<div class="cbp-l-caption-body">
<div class="cbp-l-caption-title">{{d.displayName}}</div>
</div>
</div>
</div>
</a>
</div>
我将loadmore按钮附加到vm.loadTalents()
函数,然后将当前与新找到的项目连接起来,当我在loadmore按钮上单击console.log(vm.talents)
时,数据正确连接,但它没有& #39; t将它附加到指令。