angular-ui/ui-router, come faccio ad iniettare una vista parziale usando $ stateProvider?

Question

Sto cercando di iniettare un pannello per la modifica, a seconda che sia il proprietario o meno. In questo momento, sto avendo problemi ad iniettare il pannello/vista parziale nell'html. Voglio che le mie composizioni/views/view.html siano la pagina html "di base", in cui è inserito il partial. Quindi la vista parziale è a composizioni/views/partial/views.tools.html. Qualcuno vede qualcosa di sbagliato nel mio $ stateProvider che spiegherebbe perché non posso iniettare il mio partial nel mio views.html?

Ecco il mio $ stateProvider:

$stateProvider 
     .state('all compositions', { 
      url: '/compositions/recent', 
      templateUrl: 'compositions/views/list.html' 
     }). 
      state('view', { 
       url: '/compositions/view/:compositionId', 
       views: { 
       'theTool':{ 
       templateUrl:'compositions/views/partials/view.tool.html' , 
        controller: 'CompositionsController' 
       } 
       }, 
       templateUrl: 'compositions/views/view.html', 
       controller: 'CompositionsController', 

      }). //other states here 

questo è il mio margine di profitto per la mia view.html (HTML principale)

<div ui-view="theTool"></div> 
<section data-ng-controller="CompositionsController" data-ng-init="findOne()"> 
    <h2>{{composition.title}}</h2> 
    <div ng-bind-html="trustedContent"></div> 
</section> 

Qualsiasi aiuto o consiglio è molto apprezzato. Grazie

Answer 1

Qui ho creato un working example, che dovrebbe dare tutte le risposte.

Il defintion stato rettificato è:

$stateProvider 
    .state('allCompositions', { 
    url: '/compositions/recent', 
    templateUrl: 'compositions.views.list.html' 
    }). 

state('view', { 
    url: '/compositions/view/:compositionId', 
    views: { 
    '': { 
     templateUrl: 'compositions.views.view.html', 
     controller: 'CompositionsController', 
    }, 
    'theTool@view': { 
     templateUrl: 'compositions.views.partials.view.tool.html', 
     controller: 'CompositionsController' 
    } 
    }, 

il più importante è, che il compositions.views.view.html ora sta giocando il ruolo di un obiettivo per l'fratello vista theTool. entrambe le viste sono definite sullo stesso stato ('vista') ma una di queste viene iniettata nell'altra.

Anche nel index.html ho fatto questo cambiamento:

<!--<div ui-view="theTool"></div>--> 
<div ui-view=""></div> 

così ora noi abbiamo senza nome ui-view al posto del nome. Ecco perché entrambi gli Stati

• allCompostions
• vista

che prendono di mira vista senza nome '' sono ora correttamente resi. Se di più qui in questa example

più sulla logica di inserimento vista:

• View Names - Relative vs. Absolute Names

piccola citare:

Dietro le quinte, ogni vista viene assegnato un assoluto nome che segue uno schema di viewname@statename, dove viewname è il na me usato nella direttiva view e il nome dello stato è il nome assoluto dello stato, ad es. contact.item. Puoi anche scegliere di scrivere i nomi delle tue viste nella sintassi assoluta.

esempi impressionanti dalla stessa fonte:

.state('contacts.detail', { 
    views: { 
    //////////////////////////////////// 
    // Relative Targeting    // 
    // Targets parent state ui-view's // 
    //////////////////////////////////// 

    // Relatively targets the 'detail' view in this state's parent state, 'contacts'. 
    // <div ui-view='detail'/> within contacts.html 
    "detail" : { },    

    // Relatively targets the unnamed view in this state's parent state, 'contacts'. 
    // <div ui-view/> within contacts.html 
    "" : { }, 

    /////////////////////////////////////////////////////// 
    // Absolute Targeting using '@'      // 
    // Targets any view within this state or an ancestor // 
    /////////////////////////////////////////////////////// 

    // Absolutely targets the 'info' view in this state, 'contacts.detail'. 
    // <div ui-view='info'/> within contacts.detail.html 
    "info@contacts.detail" : { } 

    // Absolutely targets the 'detail' view in the 'contacts' state. 
    // <div ui-view='detail'/> within contacts.html 
    "detail@contacts" : { } 

    // Absolutely targets the unnamed view in parent 'contacts' state. 
    // <div ui-view/> within contacts.html 
    "@contacts" : { }