AngularJS UI Router com visualizações nomeadas e controladores abstratos

Uau, esse título é demais.

Basicamente, esta postagem é para você se:

  1. Você está usando AngularJS (aplicável ao Ionic também)
  2. Você está usando o roteador de IU AngularJS brilhante
  3. Você está usando visualizações nomeadas
  4. Você quer criar um estado abstrato
  5. Você quer que o estado abstrato tenha um controlador

TL; DR

Você deve declarar seu controlador nos dados de visualização nomeados (ou seja, com o modelo que você usará) e não no nível ‘normal’.

abstract: true, url: '/app', views: {'filters': { controller: 'Ctrl', ... } }

Os documentos do Roteador de IU têm esta joia enterrada neles: “Aviso: O controlador ** não ** será instanciado se o modelo não for definido”. Se você usou o roteador de IU, normalmente descobriu que define seu controlador no nível do restante do seu estado:

$stateProvider
.state('report', {
// url, template, templateUrl, etc.
controller
: 'ReportCtrl'
})

Isso não funcionará ao usar visualizações nomeadas (o que faz sentido, considerando que um controlador é normalmente emparelhado com um único modelo). A configuração a seguir definiria ReportViewCtrl para a visualização de ‘filtros’:

$stateProvider
.state('report', {
// url, template, templateUrl, etc.
views
: {
'filters': {
controller
: 'ReportViewCtrl', // HERE
template: '<p>Template here</p>'
}
}
})

Isso é mencionado nos documentos, mas depois de 30 minutos de jogo eu nunca mais vi. Portanto, esteja avisado!