AngularJS:无法从ui路由器中的抽象状态重定向_Angularjs_Angular Ui Router

AngularJS:无法从ui路由器中的抽象状态重定向

angularjs

AngularJS:无法从ui路由器中的抽象状态重定向,angularjs,angular-ui-router,Angularjs,Angular Ui Router,在我的应用程序中，我使用ui路由器切换状态。当我切换状态时，不会显示错误，但是ui视图不会更新。这是我的index.html <!DOCTYPE html> <html> <head>  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/cerulean/bootstrap.min.css", rel="style

在我的应用程序中，我使用ui路由器切换状态。当我切换状态时，不会显示错误，但是

ui视图

不会更新。这是我的

index.html

<!DOCTYPE html>
<html>
  <head>
    <!-- css -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/cerulean/bootstrap.min.css", rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <!-- jQuery -->
    <script src="//code.jquery.com/jquery-latest.min.js"></script>
    <script src="//code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <!-- libraries concatenated -->
    <script type="text/javascript" src="libs.js"></script>
    <!-- app concatenated -->
    <script type="text/javascript" src="app.js"></script>
    <!-- html templates -->
    <script type="text/javascript" src="templates-app.js"></script>    
    <!-- meta -->
    <base href="/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body ng-controller="BodyController">
    <div class="container">
      <div class="navbar navbar-default" role="navigation" ng-show="!ls.isLogged">
        <div class="navbar-collapse">
          <!-- Navbar links -->
          <ul class="nav navbar-nav">
            <li ng-class="{ active: $state.is('app.lide') }">
              <a ui-sref="app.lide">Lidé</a>
            </li>
            <li ng-class="{ active: $state.is('app.skoleni') }">
              <a ui-sref="app.skoleni">Školení</a>
            </li>
          </ul>
        </div>
      </div>
      <!-- content will be loaded here - display 'loading...' while reading the content -->
      <div ui-view></div>
    </div>
  </body>
</html>

由于未知原因，

ui视图

始终显示文本

测试状态

，并且没有触发错误。应用程序似乎可以在状态之间无缝切换，但模板不会呈现到

ui视图中

您还需要在抽象模板中包含ui视图以显示子视图：

.state('app', {
    abstract: true,
    template: '<h2>test state: <div ui-view></div></h2>'
})

.state（'app'{
摘要：没错，
模板：“测试状态：”
})

您的父状态应该有一个

ui视图

试试这个

$stateProvider
 .state('app', {
    abstract: true,
    template: '<div><h2>test state</h2><ui-view></ui-view></div>'
 })
.state('app.lide', {
  url: '/lide',
  template: '<h2>test lide</h2>'
})
.state('app.skoleni', {
  url: '/skoleni',
 template: '<h2>test skoleni</h2>'
});

$stateProvider
.state（'应用程序'{
摘要：没错，
模板：“测试状态”
})
.state（'app.lide'{
url:“/lide”，
模板：“测试lide”
})
.state（'app.skoleni'{
url:“/skoleni”，
模板：“测试skoleni”
});

$stateProvider
 .state('app', {
    abstract: true,
    template: '<div><h2>test state</h2><ui-view></ui-view></div>'
 })
.state('app.lide', {
  url: '/lide',
  template: '<h2>test lide</h2>'
})
.state('app.skoleni', {
  url: '/skoleni',
 template: '<h2>test skoleni</h2>'
});