angularjs – 使用指令以角度分割控制器逻辑是一种好习惯吗？

发布时间：2020-12-17 07:10:31 所属栏目：安全来源：网络整理

导读：我有非常复杂的控制器(约3K行代码)演示仪表板. Controller包含许多图表,网格表等. 例如,我将网格表逻辑移动到下面提到的名为wmGridActionItems的指令中.注意,它使用父范围： app.directive('wmGridActionItems',['$rootScope','$timeout',function ($rootSco

我有非常复杂的控制器(约3K行代码)演示仪表板. Controller包含许多图表,网格表等.

例如,我将网格表逻辑移动到下面提到的名为wmGridActionItems的指令中.注意,它使用父范围：

app.directive('wmGridActionItems',['$rootScope','$timeout',function ($rootScope,$timeout) {
        return {
            restrict: 'E',templateUrl: 'views/grid-action-items.html',link: function (scope,elem,attrs) {

                // logic goes here
         }
        };
    }]);

和HTML：

<div  ui-grid="gridActionItemsOptions"                           
                      ui-grid-auto-resize
                      ui-grid-pagination
                      ui-grid-selection
                      ui-grid-auto-resize
                      ui-grid-resize-columns>
                </div>

所以在主控制器HTML中我只写：< wm-grid-action-items>< / wm-grid-action-items>

我无法在其他地方使用此指令,但至少我将我的BIG控制器划分为几个小指令,这些指令可以帮助我处理仪表板.

我做错了什么？这是好习惯吗？ Angular有其他方法可以解决这个问题吗？

编辑

这是我的$StateProvider for dashboard view：

$stateProvider  
 .state('sidemenu.dash',{
                    url: '/dshmngr',abstract: true,views: {
                        'content': {
                            templateUrl: 'views/dashboard/dashboard_manager.html',controller: 'DashboardMngrCtrl'
                        }
                    }


                })

                .state('sidemenu.dash.main',{
                    url: '/main',views: {
                        'content': {
                            templateUrl: 'views/dashboard/dashboard-main.html',controller: 'DashboardNewCtrl'
                        }
                    }
                })


                .state('sidemenu.dash.drill',{
                    url: '/drill/:type',views: {
                        'content': {
                            templateUrl: 'views/dashboard/dashboard-tag-details.html',controller: 'DashboardDetailedCtrl'
                        }
                    }
                })

谢谢,

解决方法

你的目标是正确的方向.以指令的形式将大型控制器分解为更小的组件是可行的方法,但我建议您引入一些更改.

>隔离指令的范围并定义指令明确期望的数据.这样就可以立即看到数据指令接受的内容.
>为了更容易测试,将指令与Controller配对.

基于以上两个建议,您的指令应如下所示：

app.directive('wmGridActionItems',[function () {
        return {
            controller: 'WmGridActionItemsController'
            restrict: 'E',scope: {
               gridActionItemsOptions: '=gridActionItemsOptions' 
            }
            link: function (scope,attrs) {
                // DOM manpulation (if needed) goes here
            }
        };
    }]);

app.controller('WmGridActionItemsController',['$cope',function ($cope,$timeout) {
    // logic goes here
}]);

然后你会调用上面的指令,如：

<wm-grid-action-items grid-action-item-options="gridActionItemsOptions">
</wm-grid-action-items>

我建议你也阅读这个很棒的blog post,它详细解释了“组件模式”.

另请注意,在定义隔离范围时通过显式指定来共享模型不是唯一的方法.另一种共享数据的方法是将模型作为服务(请参见related reading).

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!