Question

我指的是multiple named views doc，并在他们的一个例子中找到了这个陈述：

由于州“contacts.detail”具有命名视图，因此将忽略其模板或templateUrl（根据文档）。那么从哪里加载/定义contacts.detail.html以及如何定位'info'视图？

Answer 1

他们在您提供的文档链接中使用以下示例：

$stateProvider      
.state('contacts', {        
// This will get automatically plugged into the unnamed ui-view         
// of the parent state template. Since this is a top level state,       
// its parent state template is index.html.     
templateUrl: 'contacts.html'        
})      
.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" : { }       

    // absolutely targets the 'status' view in root unnamed state.      
    // <div ui-view='status'/> within index.html        
    "status@" : { }     

    // absolutely targets the unnamed view in root unnamed state.       
    // <div ui-view/> within index.html     
    "@" : { }       
});

好的细节是孩子的接触状态。

定义该状态时，可以使用tempalte url正常定义，也可以使用嵌套视图。如果使用嵌套视图，则应具有父状态（此处为联系人），您可以选择使用两种方式定义详细子状态：

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

相对方式（相对于其母州，此处＆＃39;联系人＆＃39;）

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

绝对方式，定义详细子状态。

This fiddle就是所有这一切的一个例子。

如何为具有命名视图的状态定义模板或templateUrl（HTML）？

1 个答案: