Question

在我们当前的AngularJS应用程序中，我们有三个选项卡，并使用3个不同的控制器来绑定它们。

var myApp = angular.module('MyApp',[]);
myApp.controller('Tab1Ctrl', function(){
  // logic to initialize Tab1 
});

myApp.controller('Tab2Ctrl', function(){
  // logic to intialize Tab2
});

myApp.controller('Tab3Ctrl', function(){
   // logic to initialize Tab3
});

我们的目的是将这些控制器合并为一个控制器，但相应地初始化这3个选项卡。我们在resolve中使用了ui-router。特定选项卡所需的所有数据都在resolve中加载，当前状态名称保存在MyService中。

myApp.config(function($stateProvider){

   $stateProvider.state('tab1', {
        url: '/tab1',
        controller: 'TabCtrl',
        templateUrl: 'tab1.html',
        resolve: {
            tabData: function(MyService) {
                MyService.setState('tab1');
                return MyService.getTab1Data();
            }
        }
    }).state('tab2', {
        url: '/tab2',
        controller: 'TabCtrl',
        templateUrl: 'tab2.html',
        resolve: {
            tabData: function(MyService) {
                MyService.setState('tab2');
                return MyService.getTab2Data();
            }
        }
    });

   });

  myApp.controller('TabCtrl', function($scope, MyService, tabData){

    /* Check for state name and initialize */
    if(MyService.getState() === 'tab1'){
      /* Use the data loaded in resolve and assign it to scope*/
      $scope.tab1Prop = tabData.prop1;
    }

    else if(MyService.getState() === 'tab2'){
      /* Use the data loaded in resolve and assign it to scope*/
      $scope.tab2Prop = tabData.prop2;
    }
  });

请注意，我们需要在$scope上设置的属性对于每个标签都不同。最后我的问题是，有没有更好的方法在单个控制器中进行这种条件初始化？

Answer 1

我唯一可以想到的是，这种静态匹配更有效的方法是使用switch语句，或者至少将MyService.getState()的结果存储在变量中，并与之进行比较而不是每张支票都叫它。

Answer 2

您的州提供者：

myApp.config(function($stateProvider){

   $stateProvider.state('tab1', {
        url: '/tab1',
        controller: 'TabCtrl',
        templateUrl: 'tab1.html',
        resolve: {
            tabData: { tabState: 'tab1',
                       initData: {'tab1propA': 'tabby1valueA',
                                  'tab1propB': 'tabby1valueB'
                                 }
                     }
            }
       }
    }).state('tab2', {
        url: '/tab2',
        controller: 'TabCtrl',
        templateUrl: 'tab2.html',
        resolve: {
            tabData: { tabState: 'tab2',
                       initData: {'tab2propA': 'tabby2valueA',
                                  'tab2propB': 'tabby2valueB'
                                 }
                     }
            }
        }
    });
});

你的控制器：

myApp.controller('TabCtrl', function($scope, MyService, tabData){

    angular.forEach(tabData.initData, function(value, key) {
        $scope[key] = value;
    };

    /* Check for state name and initialize */
    if(tabData.tabState === 'tab1'){
        //whatever else for tab1
    } else if(tabData.tabState === 'tab2'){
        //whatever else for tab2
    };
});

AngularJS |控制器中条件初始化的更好方法

2 个答案: