2016-06-29 9 views
2

私は同じ内容の左の列で3列のレイアウトで状態を定義しようとしています。しかし、現時点では、すべての直接ネストされた状態に対して、templateUrlを繰り返す必要がありました。default-viewのangle-ui/ui-router親状態

.state('workspace', { 
    url: '/', 
    templateUrl: 'app/workspace/workspace.view.html' 
}) 
.state('workspace.images', { 
    url: 'images', 
    views: { 
    'sidebar': { 
     templateUrl: 'app/workspace/sidebar.view.html', 
     controller : 'Workspace.SidebarController as vm' 
    }, 
    'content': { 
     templateUrl: 'app/workspace/imageslist.view.html', 
     controller : 'Workspace.ImagesListController as vm' 
    } 
    } 
}) 
    .state('workspace.images.edit', { 
    url: '/:key', 
    templateUrl: 'app/workspace/editor.view.html', 
    controller : 'Workspace.EditorController as vm' 
    }) 
.state('workspace.documents', { 
    url: 'documents', 
    views: { 
    'sidebar': { 
     templateUrl: 'app/workspace/sidebar.view.html', 
     controller : 'Workspace.SidebarController as vm' 
    }, 
    'content': { 
     templateUrl: 'app/workspace/documentslist.view.html', 
     controller : 'Workspace.DocumentsListController as vm' 
    } 
    } 
}); 

ご覧のとおり、毎回「サイドバー」テンプレートを繰り返す必要があります。私はそれを抽象的なフォームワークスペースの状態を構成することができるようにしたいと思います。

<div class="sidebar" ui-view="sidebar"> 
     <!-- view = sidebar --> 
</div> 
<div class="content" style="height: 100%" ui-view="content"> 
     <!-- view = content--> 
</div> 

私は"ワークスペース"状態ににviewsオブジェクトを持つべきだと思う:

workspace.view.html"サイドバー""コンテンツ"ビューが含まれています「サイドバー」テンプレートとコントローラを定義し、「コンテンツ」を空のままにします。 名前付きのビューを使用して試しましたが、成功しませんでした。私がそうすると、サイドバーのテンプレートは表示されませんが、ロードされているようです(私のコンソールに間違った名前で404が表示される)。

答えて

3

これは親にサイドバーを注入します...と子供はそれを使用したりしても、それを変更することができます。

.state('workspace', { 
    url: '/', 
    views: { 
    '': { templateUrl: 'app/workspace/workspace.view.html' } 
    '[email protected]': { 
     templateUrl: 'app/workspace/sidebar.view.html', 
     controller : 'Workspace.SidebarController as vm' 
    }, 
    } 
}) 
.state('workspace.images', { 
    url: 'images', 
    views: { 
    'content': { 
     templateUrl: 'app/workspace/imageslist.view.html', 
     controller : 'Workspace.ImagesListController as vm' 
    } 
    } 
}) 
... 

私たちも、親状態にviews : {}を使用しました。ここで絶対名は、名前は「サイドバー」とそのターゲットが「ワークスペース」状態テンプレートの内側に検索されていることを、意味 - 無名のデフォルトは、我々はまた、ビュー'[email protected]'という名前の追加元workspace.view.html

です

+1

ありがとうございました。私たちはなぜローカル名の代わりに絶対名を使うべきですか?私は '抽象'属性をそのまま使用できないことを示すために保持したいと思います。 –

関連する問題