[AngularJS]我可以用其他控制器在角 js 控制器吗?

标签: jQuery AngularJS
发布时间: 2017/4/16 11:11:33
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我想用角 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:

嗯我想你可以在另一个控制器中使用一个控制器。

你可以实现你想要的如下所示。

<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>
赞助商