Question

在我的应用程序中，我使用ui-router来切换状态。当我切换状态时，不会显示错误，但ui-view没有更新。这是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>

这是app.js档案：

angular.element(document.body).ready(function() {
  angular.bootstrap(document.body, ['ldc-app']);
});

angular.module('ldc-app', [
  // services

  // constants

  // components
  'ui.router',
  'ngAnimate',                    // animations using animate.css
  'ngMessages',                   // ng messages to validate form
  'ui.bootstrap',                 // angular bootstrap directives

])
.config(function ($stateProvider,$urlRouterProvider) {

  $stateProvider
     .state('app', {
        abstract: true,
        template: '<h2>test state</h2>'
     })
    .state('app.lide', {
      url: '/lide',
      template: '<h2>test lide</h2>'
    })
    .state('app.skoleni', {
      url: '/skoleni',
     template: '<h2>test skoleni</h2>'
    });
})
.run(function ($rootScope, $window) {
  $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
    console.log('success');  
  console.log(toState)});
  $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){
  console.log('error')});
})
/*
* main controller
*/
.controller('BodyController', function ($scope, $state, $stateParams, $http, $timeout, $rootScope) {

  // Expose $state and $stateParams to the <body> tag
  $scope.$state = $state;
  $scope.$stateParams = $stateParams;
});

由于未知原因，ui-view始终显示文本test state，并且未触发任何错误。该应用程序似乎无缝切换状态，但模板不会呈现为ui-view。

Answer 1

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

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

Answer 2

您的父州应该ui-view试试这个

$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>'
});

AngularJS：无法从ui-router中的抽象状态重定向

2 个答案: