Question

我使用UI-Router作为应用程序，但我不能理解为什么页面是空白的。没有任何模板网址正在显示。这是plunkr

的layout.html

<div ui-view="form"></div>
sdagas
<div ui-view="results"></div>

形式

This is the form page

结果

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider.state("index", {
    url: "/",
    abstract: true,
    templateUrl: 'layout.html',
    controller: 'MainController',
    controllerAs: 'main'
  })
  .state('index.layout', {
    abstract: true,
    url: 'layout',
    views: {
      'form' : {
        templateUrl: 'form.html'
      },
      'results': {}
    }
  })
  .state('index.layout.results', {
    url: '/results',
    views: {
      'results@layout': {
        templateUrl:  'results.html'
      }
    }
  });

  $urlRouterProvider.otherwise('/');
});

app.controller('MainController', function($state) {
  console.log($state);
  console.log('hello');
});

Answer 1

首先，你的plunker中没有声明ng-app ..你的html标签上应该有ng-app="app"。

其次，就像@Bilal所说的那样，你不能在要转换到的状态上abstract:true。

此外，您的ui-sref应指向州：

<a class="brand" ui-sref="index">home</a> 
|
<a class="brand" ui-sref="index.layout">ui-router</a>

这是您更新的plunker

Answer 2

来自ui-router wiki：

抽象状态可以具有子状态但无法激活本身。一个＆＃39;摘要＆＃39;国家只是一个不可能的国家过渡到。当其中一个时，它会被隐式激活后代被激活。

https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

您创建了根状态abstract: true，因此无法转换。

<强>更新

ui-sref="/"应该包含州名而不是url路径本身。如果您真的想使用网址路径，那么您应该使用href="/"

Plunkr

<强>更新

你的html中也错过了ng-app="app"。

<html ng-app="app">

Answer 3

我updated a plunker正在这里工作

我们如何调用状态结果是：

ui-sref 
<a class="brand" ui-sref="index.layout.results">
href
<a class="brand" href="#/layout/results">

我们永远无法导航到抽象的状态。所以我们不能去索引或布局

为了让plunker运行，我还介绍了 ng-app="app" ：

<!DOCTYPE html>
<html ng-app="app">

启动应用程序

另外，因为'/'是另外的抽象我使用了另一个设置来进入一些非抽象状态

$urlRouterProvider.when('/', '/layout/results');
$urlRouterProvider.otherwise('/');

最后（但几乎是最重要的），这是更新的超级子状态，它确定的目标视图不是布局而是索引状态

.state('index.layout.results', {
  url: '/results',
  views: {
    // wrong
    //'results@layout': {
    // this target is in the super parent
    'results@index': {
      templateUrl: 'results.html'
    }
  }
});

检查here

UI-Router显示白页而没有错误

3 个答案: