Angular UI Router使用templateProvider命名视图

Question

我有一个具有两个不同功能层的应用程序。我没有经常检查控制器中的层，而是在功能差异很大的地方，我只有两个独立的模板和控制器。

在某些情况下，我只使用controllerProvider来选择不同的控制器，在其他地方我只使用templateProvider来选择不同的模板，在某些地方我同时使用它们。我对最后一个案子有疑问。

采取以下州声明：

$stateProvider
    .state('patient.orders.list', {
      url: '/orders/list',
      title: 'Orders',
      views: {
        'orders@patient.orders': {
          templateProvider: ['$rootScope','$templateCache','$http', function($rootScope, $templateCache, $http) {
            var templateName;

            if($rootScope.tier === 'SWIFT') {
              templateName = 'views/patients/patient/orders/list.swift.tmpl.html';
            } else {
              templateName = 'views/patients/patient/orders/list.ik.tmpl.html';
            }

            var template = $templateCache.get(templateName);

            if(template) {
              return template;
            }

            return $http
              .get(templateName)
              .then(function(response) {
                template = response.data;
                $templateCache.put(templateName, template);
                return template;
              });
          }],
          controllerProvider: ['$rootScope', function($rootScope) {
            if($rootScope.tier === 'SWIFT') {
              return 'PatientOrdersSwiftListCtrl';
            } else {
              return 'PatientOrdersIkListCtrl as vm';
            }
          }]
        }
      },
      resolve: {
        treatmentHistories: ['TreatmentHistory', '$stateParams', function (TreatmentHistory, $stateParams) {
          var params = {},
            options = {bypassCache: true, endpoint: 'patients/' + $stateParams.patientid + '/treatmenthistory'};
          TreatmentHistory.ejectAll();
          return TreatmentHistory.findAll(params, options)
            .then(_.identity,
            // on error
            function (error) {
              console.log('Error encountered fetching treatmentHistories:' + error);
              return 'fetchError';
            });
        }],
        discontinueReasons: ['DiscontinueReason', function (DiscontinueReason) {
          return DiscontinueReason.findAll()
            .then(_.identity,
            // on error
            function (error) {
              console.log('Error encountered fetching discontinue reasons:' + error);
              return 'fetchError';
            });
        }]
      }
    })

这很棒！问题出现在views/patients/patient/orders/list.ik.tmpl.html模板具有命名视图：

<div layout="row">
  <filter-pane class="padding-light">
     <md-list>
       <md-list-item ng-repeat="treatmentHistory in vm.treatmentHistories">
         <h3 ui-sref="patient.orders.list.plan({regimenOrderId: treatmentHistory.regimenOrder.id})">{{treatmentHistory.regimenOrder.name}}</h3>
       </md-list-item>
     </md-list>
  </filter-pane>
  <div layout="row" ui-view="plan"></div>
</div>

然后是调用该命名视图的状态声明：

.state('patient.orders.list.plan', {
      url: '/{regimenOrderId}',
      params: {
        regimenOrderId: null
      },
      views: {
        'plan@patient.orders.list': {
          templateUrl: 'views/patients/patient/orders/orders.treatmentplan.tmpl.html',
          controller: 'PatientOrdersTreatmentPlanCtrl'
        }
      }
 })

当我patient.orders.list使用templateProvider和controllerProvider时，patient.orders.list.plan将无法呈现。当我切换patient.orders.list仅使用templateUrl和controller时，一切正常！

我不希望必须有两个独立的状态并处理父状态下的切换逻辑，我喜欢能够使用提供程序语法。