2016-05-13 30 views
1

我想了解如何使用ui路由器視圖。這是我到目前爲止有:如何使angular-ui-router模板接受兩個視圖?

var rootSubjectsSubjectAdminWordsWord = { 
    name: 'r.s.s.a.w.w', 
    template: '<div ui-view ></div>', 
    url: '/:wordId', 
}; 

var rootSubjectsSubjectAdminWordsWordDelete = { 
    name: 'r.s.s.a.w.w.delete', 
    templateProvider: ['$templateCache', ($templateCache) => { 
     return $templateCache.get('/app/admin/word/word.html'); 
    }], 
    url: '/delete', 
}; 

/app/admin/word/word.html

<div> 
    <ng-include src="'/app/admin/word/wordData.html'"></ng-include> 
    <ng-include src="'/app/admin/word/wordForms.html'"></ng-include> 
</div> 

我想要做的是去除需要具有word.html。

有沒有一種方法可以使模板'<div ui-view ></div>'以某種方式命名視圖來接受兩個HTML 文件?

+1

看到這個https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views –

回答

0

這是根據UI Router Docs。基本上在視圖對象定義的地方是你將視圖命名並指向該視圖的位置(見#1)。之後,路由器將負責其餘的事情。

$stateProvider 
    .state('report', { 
    views: { 
     //(#1)--here is the named router matching in the html. 
     'filters': { 
     templateUrl: 'report-filters.html', 
     controller: function($scope) {...controller stuff just 
      for filters view... 
     } 
     }, 
     'tabledata': { 
     templateUrl: 'report-table.html', 
     controller: function($scope) {...controller stuff just 
      for tabledata view... 
     } 
     }, 
     'graph': { 
     templateUrl: 'report-graph.html', 
     controller: function($scope) {...controller stuff just 
      for graph view... 
     } 
     } 
    } 
    }); 
<body> 
    <div ui-view="filters"></div> 
    <div ui-view="tabledata"></div> 
    <div ui-view="graph"></div> 
</body> 
+0

嗨,如果你有幾分鐘的時間您能不能告訴我怎麼能這樣做這使用問題代碼只是爲了更清楚地解答一個問題。 –

+0

@SamanthaJ當然,首先你使用什麼版本的角? – alphapilgrim

+0

這裏是一個運動員https://plnkr.co/edit/Vu4ILp3vTZMZFwTF0NmI?p=preview –

相關問題