我想使用Angular JS滚动条来显示内容。
这是我想要使用的两个控制器。
module.controller('productsCtrl', function($scope){
$scope.products = [
{src:'../static/images/image-3.png', title : 'Image 3'},
{src:'../static/images/image-4.png', title : 'Image 4'},
{src:'../static/images/image-3.png', title : 'Image 5'},
{src:'../static/images/image-3.png', title :'Image 5'}
];
});
这是滚动条控制器。
module.config(function (ScrollBarsProvider) {
// scrollbar defaults
ScrollBarsProvider.defaults = {
autoHideScrollbar: false,
setHeight: 200,
scrollInertia: 200,
axis: 'yx',
advanced: {
updateOnContentResize: true
},
scrollButtons: {
scrollAmount: 'auto', // scroll amount when button pressed
enable: true // enable scrolling buttons by default
}
};
});
module.controller('scrollCtrl', function($scope) {
$scope.scrollbarConfig = {
theme: 'dark',
scrollInertia: 500
}
});
这是我的HTML代码。
<div class='' ng-controller ='scrollCtrl'>
<div class='prducts_thumbnail thumb_container' ng-controller='productsCtrl' ng-scrollbars ng-scrollbars-config="scrollbarConfig">
<div class='col-md-4' ng-repeat='product in products'>
<a href='#'><img ng-src = '{{product.src}}' alt="{{product.title}}" /></a>
</div>
<div class='clearfix'></div>
我该如何实现?
答案 0 :(得分:0)
我认为你可以在另一个控制器中使用一个控制器。
您可以按照以下方式实现您想要的内容。
<div class='thumb_container' ng-controller = 'scrollCtrl'>
<div class='prducts_thumbnail' ng-scrollbars ng-scrollbars-config="scrollbarConfig">
<div ng-controller='productsCtrl'>
<div class='col-md-4' ng-repeat='product in products'>
<a href='#'><img ng-src = '{{product.src}}' alt="{{product.title}}" /></a>
</div>
</div>
<div class='clearfix'></div>
</div>
</div>