Question

.state("home",{
    url:'/home',
    templateUrl:'./resources/js/baseapp/ContactHome/views/ContactHome.html'

})
.state("home.contacts",{
    url:'/home',
    views:{

        "contactByName":{
            templateUrl : './resources/js/baseapp/ContactHome/views/SearchByName.html',
            controller:'contactHomeCtrl'
        },
        "contactByNumber":{
            template:"This is search by Number",
            controller:'contactHomeCtrl'
        },
        "contactByArea":{
            template:"This is search by Area",
            controller:'contactHomeCtrl'
        }


    }

}）

状态（home.contacts）有3个视图不起作用，没有显示3个部分，有人可以帮我这个以下是ContactHome.html中的ui-view指令

<div ui-view="contactByName">  
<div ui-view="contactByNumber"> 
<div ui-view="contactByArea">

Answer 1

您作为概念的定义应该有效。有a working example

我稍微调整了子状态的网址'/contacts'（/home留给 home ）

.state("home",{
    url:'/home',
    templateUrl:'resources/js/baseapp/ContactHome/views/ContactHome.html'

})
.state("home.contacts",{
    url:'/contacts',
    views:{

        "contactByName":{
            templateUrl : 'resources/js/baseapp/ContactHome/views/SearchByName.html',
            controller:'contactHomeCtrl'
        },
        "contactByNumber":{
            template:"This is search by Number",
            controller:'contactHomeCtrl'
        },
        "contactByArea":{
            template:"This is search by Area",
            controller:'contactHomeCtrl'
        }   

    }

这些链接现在正在运作

  <a href="#/home">
  <a href="#/home/contacts">
  <a ui-sref="home">
  <a ui-sref="home.contacts">

使用它here

AngularJS UI.router使单个页面中的视图不起作用

1 个答案: