angular-ui/ui yönlendirici, $ stateProvider kullanarak kısmi görünümü nasıl enjekte edebilirim?

Question

Görüntüleyicinin sahibi olup olmadığına bağlı olarak düzenleme yapmak için bir panel oluşturmaya çalışıyorum. Şu anda, sadece panel/kısmi görünümü html'ye enjekte ederken sorun yaşıyorum. Kompozisyonlarım/views/view.html'nin kısmi olarak enjekte edildiği 'base' html sayfası olmasını istiyorum. Daha sonra kısmi görünüm kompozisyonlar/görünümler/bölümler/views.tools.html. $ StateProvider'ımda yanlış olan bir şey görüyor mu? Neden benim view.html bölümüne benim kısmi enjekte edemediğimi açıklıyor? Bu benim biçimlendirme benim view.html içindir

$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 

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

Herhangi bir yardım veya tavsiye büyük takdir:

İşte benim $ stateProvider olduğunu. Teşekkürler

Answer 1

Burada, tüm yanıtları vermesi gereken bir working example oluşturdum.

düzeltilmiş devlet Definition geçerli:

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

en önemlisidir, compositions.views.view.html şimdi kardeş görünüm theTool için bir hedef rolünü oynadığını. Her iki görüş de aynı durumda ('görünüm') tanımlanır, ancak bunlardan biri diğerine enjekte edilir. böylece

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

şimdi yerine adlandırılmış bir isimsiz ui-görünümü var:

Ayrıca index.html ben bu değişikliği yaptık. Her iki

• allCompostions '' isimsiz görünümü hedef

artık düzgün oluşturulur

görünümü devletler nedeni budur.

küçük
• View Names - Relative vs. Absolute Names

alıntı: daha burada görünümü ekleme mantığı hakkında daha fazla bu example

Se Sahne arkası

, her görünüm mutlak atanır viewname@statename şemasını izleyen ad, burada görünüm adı na görünüm yönergesinde kullandım ve eyalet adı devletin mutlak adıdır, örn. contact.item. Ayrıca, görünüm adlarınızı mutlak sözdiziminde yazmayı da seçebilirsiniz. aynı kaynaktan

Müthiş örnekler:

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