我可以在角度js的其他控制器中使用控制器吗?

时间:2016-03-28 14:28:27

标签: jquery angularjs angularjs-controller

我想使用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>

我该如何实现?

1 个答案:

答案 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>