角度ui视图嵌套路由

Question

我在我的应用程序中有一个嵌套的ui路由。索引页（根页面）工作，但不是嵌套页面。

这里是我的app.js

var app = angular.module('app', ['ui.router']) 
.config(function($stateProvider, $urlRouterProvider, $locationProvider) { 
    $locationProvider.html5Mode(true); 
    $stateProvider 
     .state('index', 
     { 
      url: '/index', 
      templateUrl: 'index.html' 
     }) 
     .state("index.salesorder", 
     { 
      url: '/salesorder', 
      views: { 
       'mainlayout': { 
        templateUrl: 'partials/salesorder.html' 

       } 
      } 

     }); 
}); 

在我的index.html，我有一个用户界面视图属性的DIV

<div ui-view="mainlayout"> </div> 

我还添加了必要的脚本的角度，和UI的路线。我在控制台中没有任何错误。但销售订单不显示。尽管我看到了索引。

Answer 1

你的第二个状态index.salesorder是index的子状态。你有没有正确的嵌套ui视图？看起来你可能需要3个级别的UI视图。

试试这个：

var app = angular.module('app', ['ui.router']) 
 
.config(function($stateProvider, $urlRouterProvider, $locationProvider) { 
 
    $locationProvider.html5Mode(true); 
 
    $stateProvider 
 
     .state("salesorder", 
 
     { 
 
      url: '/salesorder', 
 
      views: { 
 
       'mainlayout': { 
 
        templateUrl: 'partials/salesorder.html' 
 

 
       } 
 
      } 
 

 
     }); 
 
});

main.html中：

<div ui-view></div> 

salesorder.html：

<div ui-view="mainlayout"></div>