Question

大家好我想在我的网站上使用有角度的ui-router进行嵌套路由，但我不知道我哪里出错了

这是我的代码

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>

在上面的代码中，我正在调用＆＃39; home.html＆＃39;在index.html到ui-view，然后在contactform.html中调用home.html，但未加载contactform.html。

Answer 1

你也需要定义网址，

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

<强> DEMO

ui-router嵌套路由不起作用

1 个答案: