我有以下情况:
让我的主视图包含页眉,页脚和ng-view以根据控制器加载视图(根据路径选择的控制器)。
<header></header>
<div ng-view="" class="fill"></div>
<footer>
<span ng-click="nextSlide(swiper)">Next Slide</span>
</footer>
在控制器中,我有一个带有指令的视图,创建一个滑块并返回滑块对象:
angular.module('App').directive('npSwiper', [
'$timeout',
function($timeout) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$timeout(function() {
// This code will run after template has been loaded
// and transformed by directives
$timeout(function() {
// and properly rendered by the browser
$timeout(function() {
$timeout(function() {
var params = {
slideElement: 'article',
mode: 'horizontal',
calculateHeight: true,
paginationClickable: true,
pagination: '.pagination',
resizeReInit: true
};
if (attrs.npSwiper === 'gallery') {
params.slidesPerView = 1;
params.createPagination = false;
params.loop = true;
}
scope.swiper = new Swiper('.swiper-container', params);
console.log('directive', scope.swiper);
new Swiper('.swiper-container-instagram', {
slideElement: 'article',
mode: 'horizontal',
calculateHeight: false,
paginationClickable: true,
pagination: '.pagination-instagram',
resizeReInit: true
});
});
});
});
});
}
};
}
]);
我可以创建一个函数
$scope.nextSlide = function(slider) {
slider.swipeNext();
}
分配给ng-click到一个范围,例如在从控制器加载的同一个视图中,但是当我想将它分配给页脚时(在滑块视图外)它没有结果。
也可以通过以下方式从控制器调用滑块:
$scope.swiper
给出undefined。任何想法如何达到它?