在ui视图中的角度UI路由器ui视图

我在index.html中有ui-view，我有一个信息页面，在那里我想把第二个ui视图与4个链接。在ui视图中的角度UI路由器ui视图

在我的index.html

<body ng-app="myApp"> 
    <div ui-view></div> 
</body>

这是我的信息。我想在info.html页面info-number.html中打开默认。

<div class="col-sm-8" style="border:1px solid; min-height: 
    <h1>Some text</h1> 
    <div ui-sref></div> 
</div>

这是我的应用程序。

myApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/home'); 
    $stateProvider 
    .state("home", { 
     url: "/home", 
     templateUrl: "home.html" 
    }) 
    .state("info", { 
     url: "/info", 
     templateUrl: "info.html", 
    }) 
    .state("info-number", { 
     abstract: true, 
     parent: "info", 
     url: "/info-number", 
     templateUrl: "info-number.html" 
    }) 
    .state("info-about", { 
     parent: "info", 
     url: "/info-about", 
     templateUrl: "info-about.html" 
    }) 
    .state("info-where", { 
     parent: "info", 
     url: "/info-where", 
     templateUrl: "info-where.html" 
    }) 
    } 
]);

模式我的网页的信息

感谢您的帮助。

来源

2017-08-16 mrkibzk

即使其默认值，您也不需要将info-number设置为abstract。您的abstract视图应为info。所以当用户点击“信息”链接（按钮）时，您可以将其重定向到默认的info/info-number。

我将它写成：

$stateProvider 
     .state("home", { 
      url: "/home", 
      templateUrl: "home.html" 
     }) 
     .state("info", { 
      url: "/info", 
      abstract: true, 
      templateUrl: "info.html", 
     }) 
     .state("info.info-number", { 
      url: "/info-number", 
      templateUrl: "info-number.html" 
     }) 
     .state("info.info-about", {     
      url: "/info-about", 
      templateUrl: "info-about.html" 
     }) 
     .state("info.info-where", {    
      url: "/info-where", 
      templateUrl: "info-where.html" 
     })

的info.html具有类似的结构：

<div> 
    <h1>Some Text</h1> 
    <div ui-view></div> 
</div>

来源

2017-08-16 09:10:08

嗨马克西姆TNX的答案，它的作品！ – mrkibzk

在ui视图中的角度UI路由器ui视图

回答

相关问题