Question

我认为我的代码是正确的，但它无法正常工作。它没有显示“关于”页面的描述。

我试图通过.state('home.about')和通过父母写作：＆＃34; home＆＃34;。不幸的是它没有用。

我可以让这个工作吗？

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script data-require="ui-router@0.4.2" data-semver="0.4.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script>
  </head>

  <body ng-app="usersApp">
    <a ui-sref="home" ui-sref-active="active">Home</a> 
    <a ui-sref="home.about" ui-sref-active="active">About</a> 
    <ui-view></ui-view>
    <script>
      
    var app = angular.module('usersApp', ['ui.router']);

    app.config(function($stateProvider, $urlRouterProvider) {
      
      $urlRouterProvider.otherwise('/home');
      
        $stateProvider
          .state('home', {
            url: '/home',
            template: '<h3>Home page</h3>'
          })
          .state('home.about', {
            url: '/about',
            template: '<h3>Home page / About page</h3>'
          });

    });
    
      
      
    </script>
  </body>

</html>

＆＃13;

Answer 1

因为您正在制作家庭的儿童路线，所以家庭模板需要一个ui-view元素。所以你的两个选择是

将ui-view添加到主页模板

主页
将状态从家庭层级中移开。

.STATE（ '约'）

UI-SREF = “约”

Answer 2

由于home.about的子状态为home，因此您需要在ui-view州的模板中显示home。

请参阅以下代码段，该代码段在此更改后有效：

var app = angular.module('usersApp', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/home');

  $stateProvider
    .state('home', {
      url: '/home',
      template: '<h3>Home page</h3><ui-view></ui-view>'
    })
    .state('home.about', {
      url: '/about',
      template: '<h3>Home page / About page</h3>'
    });

});

<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script data-require="ui-router@0.4.2" data-semver="0.4.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script>

<div ng-app="usersApp">
  <a ui-sref="home" ui-sref-active="active">Home</a>
  <a ui-sref="home.about" ui-sref-active="active">About</a>
  <ui-view></ui-view>
</div>

或者，您绝对可以使用named views定位ui-view home州。

angular-ui-router没有按预期工作

2 个答案:

主页