angular-ui/ui-router, w jaki sposób wstrzyknąć częściowy widok za pomocą $ stateProvider?

Question

Próbuję wstawić panel do edycji, w zależności od tego, czy przeglądarka jest właścicielem, czy nie. W tej chwili mam problem z wstrzyknięciem panelu/częściowego widoku do html. Chcę, aby moja strona composition/views/view.html była "podstawową" stroną html, do której wstawiono częściowe. Następnie widok częściowy znajduje się w komendach/views/partials/views.tools.html. Czy ktoś widzi coś złego z moim $ stateProvider, który wyjaśniłby, dlaczego nie mogę wstrzyknąć mojej części do mojego views.html?

Oto moja $ 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 

to jest mój znaczników dla mojego view.html (główny html)

<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> 

Każda pomoc lub rada jest mile widziana. Dzięki

Answer 1

Tutaj stworzyłem working example, który powinien dać wszystkie odpowiedzi.

Skorygowana defintion stan jest:

$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' 
    } 
    }, 

najważniejsze jest to, że compositions.views.view.html jest teraz w roli tarczy dla rodzeństwemtheTool widzenia. oba widoki są zdefiniowane w tym samym stanie ("widok"), ale jedno z nich jest wstrzykiwane do drugiego.

Również w index.html Zrobiłem tę zmianę:

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

więc teraz mamy nienazwany UI-view zamiast nazwiska. Dlatego zarówno stwierdza

• allCompostions
• zobacz

który kierować nienazwany widok '' są teraz prawidłowo renderowane. Se więcej tutaj w tym example

Więcej o logice widok wstawienia:

• View Names - Relative vs. Absolute Names

mały wymienić:

za kulisami, każdy widok zostanie przydzielony absolutną nazwa podążająca za schematem , gdzie viewname jest na ja używane w dyrektywie widoku, a nazwa stanu to bezwzględna nazwa stanu, np. contact.item. Możesz także zapisać swoje nazwy widoków w absolutnej składni.

Niesamowite przykłady z tego samego źródła:

.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" : { }