Как я могу вручную настроить контроллеры с помощью ui-router?

Question

так, в моем «корень» контроллер ...

$scope.subElements = [ 
      { heading: "Contact", state: "institution.contact", active: false }, 
      { heading: "Adapters", state: "institution.adapters", active: false }, 
      { heading: "Transactions", state: "institution.transactions", active: false }, 
      { heading: "Organizations", state: "institution.organizations", active: false }, 
      { heading: "Users", state: "institution.users", active: false } 
     ]; 

и в моем «корень» вид ...

<tabset> 
     <tab ng-repeat="elem in subElements" 
      heading="{{elem.heading}}" 
      select="go(elem.state)" 
      active="elem.active"> 
     </tab> 
    </tabset> 

это работает прекрасно, но проблема в том, контроллер не создается, пока пользователь не нажмет на заголовок вкладки. Таким образом, пользователь должен дождаться загрузки данных, необходимых контроллеру из удаленной конечной точки. Я бы предпочел более детальный контроль загрузки данных, например, запуск других субконтроллеров для загрузки в фоновом режиме и активация их соответствующих вкладок по завершении.

Как я могу это достичь?

Answer 1

Вы пытались использовать объект разрешения своих государств? Из документации:

Вы можете использовать разрешение, чтобы предоставить вашему контроллеру контент или данные, которые являются обычными для состояния. Решение - это необязательная карта зависимостей, которая должна быть введена в контроллер.

Если какая-либо из этих зависимостей является обещанием, они будут разрешены и преобразованы в значение до создания экземпляра контроллера и запускается событие $ stateChangeSuccess.

https://github.com/angular-ui/ui-router/wiki#resolve

Например:

$stateProvider.state('institution.transactions', { 
    'url': '/institution/transactions', 
    'controller': 'transactionsController', 
    'templateUrl': 'transactions.html', 
    'resolve': { 
     'transactions': [ 
      'TransactionService', 
      function (TransactionService) { 
       return TransactionService.get(); 
      } 
     ] 
    } 
}); 

Теперь вы можете придать операции в контроллер:

angular.module('app').controller('transactionsController', [ 
    '$scope', 
    'transactions', 
    function ($scope, transactions) { 
     $scope.transactions = transactions; 
    } 
]); 

Теперь при изменении заявить institution.transactions контроллер будет ждать с инициализацией до тех пор, пока обещание, возвращенное службой, не будет разрешено. Только тогда контроллер активируется, и просмотр переключается. Между тем вы можете использовать события onStateChangeStart и onStateChangeSuccess, чтобы показать какой-то индикатор прогресса/занятости. См.: https://github.com/angular-ui/ui-router/wiki#state-change-events

Вы также можете разрешить все зависимости вашего дочернего состояния в своем родительском состоянии, просто поместите их все в объект разрешения этого состояния. Они будут доступны для проживания:

$stateProvider.state('institution', { 
    'url': '/institution', 
    'controller': 'institionController', 
    'templateUrl': 'institution.html', 
    'resolve': { 
     'contact': [ 
      'ContactService', 
      function (ContactService) { 
       return ContactService.get(); 
      } 
     ] 
     'adapters': [ 
      'AdapterService', 
      function (AdapterService) { 
       return AdapterService.get(); 
      } 
     ] 
     'transactions': [ 
      'TransactionService', 
      function (TransactionService) { 
       return TransactionService.get(); 
      } 
     ], 
     // and on and on and on 
    } 
});