角度控制器继承和传递参数

时间:2016-11-28 11:46:19

标签: angularjs inheritance

我有两个控制器,一个是父控制器(基本控制器),第二个控制器是子控制器,我将整个父控制器继承到子控制器,因为父控制器中的功能在大约20个控制器中是相同的。 到目前为止,继承工作正常。

我想要实现的目标:

在父控制器中有一个服务器功能,它具有在每个控制器中不断变化的sourceUrl,这是继承父控制器并发出请求时唯一需要更改的内容。现在我不知道如何覆盖父控制器中的sourceURL。我想我必须使用工厂或其他东西。任何人都可以帮助我。

家长控制器:

WL_module.controller('WLbaseController', WLbaseController);
    function WLbaseController($scope, $http, $filter, $q, $compile, DTOptionsBuilder, DTColumnBuilder,  SimpleHttpRequest, serverData)
    {
        $scope.GetTData = function()
        {
            $scope.dtOptions = DTOptionsBuilder
            .newOptions() // make sure to comment it out when working with client side
            .withFnServerData(server) // for server request
            .withDataProp('data')
            .withOption('processing', true)
            .withOption('serverSide', true)
            .withOption('stateSave', true) // works only with server side
            .withOption('responsive', true) // not sure if work with both
            .withOption('paging', true)
            .withOption('lengthMenu', [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 100 ])
            .withOption('order', [0, 'asc'])
            .withDisplayLength(10)
            .withPaginationType('full_numbers')
            .withButtons([
                'colvis',
                'print',
                'excel'
            ])
            // .withDOM('frtip')
            .withOption('createdRow', function(row, data, dataIndex)
            {
                $compile(angular.element(row).contents())($scope);
            });
        };

        function server(sSource, aoData, fnCallback, oSettings)
        {
            // Server Request URL
            var sourceUrl = _config.furl+'SelectWL/es_wl_1_11_test';         
            return serverData.request($scope, sourceUrl, sSource, aoData, fnCallback, oSettings); 
        }

        // Always Initialize it to Render the Tables
        $scope.GetTData();
    };

儿童控制器:

WL_module.controller('class4_Controller', class4_Controller);
    class4_Controller.$inject = ['$scope', '$controller', 'DTColumnBuilder', '$filter'];
    function class4_Controller($scope, $controller, DTColumnBuilder, $filter)
    {
        $controller(WLbaseController, {$scope: $scope});

        $scope.dtColumns =
        [
            DTColumnBuilder.newColumn('es_wl_1_11_test_id').withTitle('W.ID'),
            DTColumnBuilder.newColumn('es_wl_1_11_test_added_datetime').withTitle('W.A.D')
            .renderWith(function(data, type)
            {
                return $filter('date')(new Date(data), 'dd-MM-yyyy');
            }),
            DTColumnBuilder.newColumn('es_wl_1_11_test_edit_datetime').withTitle('W.E.D')
            .renderWith(function(data, type)
            {
                return $filter('date')(new Date(data), 'dd-MM-yyyy');
            }),
            DTColumnBuilder.newColumn('es_officer_id').withTitle('O.ID'),
            DTColumnBuilder.newColumn('es_officer_name').withTitle('O Name'),
            DTColumnBuilder.newColumn('es_officer_fname').withTitle('O.F.Name'),
            DTColumnBuilder.newColumn('es_officer_apply_status').withTitle('O Apply Status').notVisible(),
            DTColumnBuilder.newColumn('es_officer_dob').withTitle('DOB')
            .renderWith(function(data, type)
            {
                return $filter('date')(new Date(data), 'dd-MM-yyyy');
            }),

            // DTColumnBuilder.newColumn('es_designation_id').withTitle('Desg ID'),
            DTColumnBuilder.newColumn('es_designation_title').withTitle('Desg Title'),
            // DTColumnBuilder.newColumn('es_employment_type_id').withTitle('E.T ID'),
            DTColumnBuilder.newColumn('es_employment_type_name').withTitle('E.T Name'),
            // DTColumnBuilder.newColumn('es_service_type_id').withTitle('S.T ID'),
            DTColumnBuilder.newColumn('es_service_type_name').withTitle('S.T Name'),
            // DTColumnBuilder.newColumn('es_bps_id').withTitle('Bps ID'),
            DTColumnBuilder.newColumn('es_bps_title').withTitle('Bps Title'),
            // DTColumnBuilder.newColumn('es_department_id').withTitle('Dept ID'),
            DTColumnBuilder.newColumn('es_department_name').withTitle('Dept Name'),

            DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable().withOption('width', '8%')
            .renderWith(function(data, type, full, meta)
            {
                return '<a class="btn btn-success" ng-href="#/Allot_House/' + data.es_officer_id + '">' +
                    '<i class="icon-ok icon-white"></i> Allot' + '</a>';
            })
        ];

        var sourceUrl = _config.furl+'changedURL';
        // I want to override the sourceUrl in server in parent controller with above mentioned sourceUrl 
    };

1 个答案:

答案 0 :(得分:0)

您可以使用服务创建继承而不是使用控制器。我添加了一个示例代码。

angular.module('app',[])
.service('aService', ['someDependency', function(someDependency){
   this.url = 'a/url';
}])
.service('bService', ['aService', function(aService){
   //you can create a object using aService and return that from service - use this approach when using a factory
   //var bService = Object.create(aService);
   //return bService
   angular.extend(this, aService);
   this.url = 'b/url';
}])
.controller('aCtrl',['$scope','aService', function($scope, aService){
aService.url //gives you 'a/url'
}])
.controller('bCtrl',['$scope','bService', function($scope, bService){
bService.url //gives you 'b/url';
}])
相关问题