ui-router嵌套路由不起作用

Question

大家好，我正在尝试使用角度ui路由器在我的网站中进行嵌套路由，但我不知道我要去哪里

这是我的代码

app.js

var faqApp = angular.module('faqApp', ['ui.router']);

faqApp.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('/home');
    $stateProvider
    .state('home',{
        url: '/home',
        templateUrl: 'templates/home.html',
        controller: 'homeCtrl'
    })
    .state('home.contactform', {
        templateUrl: 'templates/contactform.html',
    })
});

home.html

<div class="faq_head clearfix">
    <a href="https://crownit.in"><img src="images/backbtn.png"></a>
    <h1>Help</h1>
</div>
<div ui-view></div>
<div class="faq_inner">
  <h2 class="faq_heading">FAQs</h2>
  <ul>
    <li ng-repeat="option in faqoptions">
      <a href="{{option.url}}" class="clearfix">
          <span class="icon">
              <img ng-src="{{option.image}}">
          </span>
          <span class="faq_name">{{option.name}}</span>
          <span class="arrow">
              <img src="images/right_arrow.png">
          </span>
        </a>
    </li>
  </ul>
</div>
<div class="bottom_btn_box">
    <a href="http://website_wordpress-dev.crownit.in/termsAndroid" class="bottom_btn">Terms &amp; Conditions</a>
    <a href="http://website_wordpress-dev.crownit.in/creditsAndroid" class="bottom_btn">Credits</a>
</div>

index.html

<!doctype html>
<html>
    <head>
        <title>Frequently ask questions</title>
        <link rel="stylesheet" type="text/css" href="css/libs/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div ng-app="faqApp">

            <div ui-view></div>


        </div>


        <script src="js/libs/jquery-1.12.3.min.js"></script>
        <script src="js/libs/angular.js"></script>
        <script src="js/libs/angular-ui-router.min.js"></script>
        <script src="js/app.js"></script>
        <script src="js/controller/homeCtrl.js"></script>
    </body>
</html>

在上面的代码中，我通过ui-view在index.html调用了“ home.html”，然后在home.html调用了contactform.html ，但没有加载contactform.html 。

Answer 1

您还需要定义网址，

  .state('home.contactform', {
        url: "/contactform",
        templateUrl: 'templates/contactform.html',
    })

演示

ui-router嵌套路由不起作用

问题描述

1 个解决方案

解决方案1
0 2016-10-25 11:29:31

ui-router嵌套路由不起作用

问题描述

1 个解决方案

解决方案1 0 2016-10-25 11:29:31

解决方案1
0 2016-10-25 11:29:31