Angular UI-Router路由配置不起作用

Question

我正在使用UI-Router為新應用程序進行路由。我為主頁定義了狀態。 我的頁面上有“注冊”鏈接，該鏈接需要作為獨立狀態的模式窗口打開，並且我正在使用“ onEnter”觸發模式窗口。 當用戶單擊模式窗口的關閉按鈕時，我希望將用戶重定向到主頁狀態。 我能夠使用“ ui-sref”路由回到原始狀態，但無法關閉模式窗口。 我嘗試使用data-dismiss =“ modal”。 我做錯什么了嗎？

以下是我嘗試的配置：

index.html

<!DOCTYPE html>
<html>
   <head lang="en">
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
      <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
      <meta http-equiv="Pragma" content="no-cache" />
      <meta http-equiv="Expires" content="0" />
      <title>Idea Generation App</title>
      <!-- inject:css -->
      <link rel="stylesheet" href="app/styles/css/bootstrap.min.css">
      <link rel="stylesheet" href="app/styles/css/ideaManagementUI.css">

      <!-- endinject -->
   </head>

   <body ng-app="app">

   <div id="mainContainer">

        <div id="ideaDriveImgContainer" class="backgroundSize">
         <img id="ideaDriveImg" class="backgroundSize">
        </div>   

        <div ui-view></div>

  </div>

      <!-- bower:js -->
      <script src="bower_components/angular/angular.js"></script>
      <script src="bower_components/angular-route/angular-route.js"></script>
      <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
      <script src="bower_components/angular-ui-bootstrap-bower/ui-bootstrap-tpls.js"></script>
      <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
      <!-- endinject -->
      <!-- inject:js -->
      <script src="app/scripts/module/app.js"></script>
      <script src="app/scripts/controllers/IdeaMgmtMainController.js"></script>

      <!-- endinject -->
   </body>

</html>

ideaMgmt-landing.html（用於我的首頁的html）

<div id="signUpContainer" style="cursor: pointer;">
   <div id="signUpArea" class="text">
      <a ui-sref="signUp"><span>SignUp</span></a> //to trigger the signUp state
   </div>
</div>

signUpModal.html

 <div id="close" class="ax_shape">
            <a ui-sref="home">
            <button type="button" class="close" aria-label="Close" data-dismiss="modal">
                <span aria-hidden="true">&times;</span>
            </button></a>

    </div>

app.js（路由配置）

(function(){
    'use strict';
    var App = angular.module('app', ['ui.router','ui.bootstrap']);

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

        $stateProvider.state('home', {
            url:'/home',
            templateUrl:'app/views/ideaMgmt-landing.html' ,
            controller: 'IdeaMgmtMainController'
        }),
        $stateProvider.state('signUp', {
            url: '/signUp',
         // trigger the modal to open when this route is active
            onEnter: ['$stateParams', '$state', '$modal',
              function($stateParams, $state, $modal) {
                 // handle modal open
                $modal.open({
                    templateUrl: 'app/views/modalTemplates/signUpModal.html',

                  });
               }]
        });

        $urlRouterProvider.otherwise('/home');
    });
}
());

Answer 1

您可以將控制器添加到模態：

$modal.open({
    templateUrl: 'app/views/modalTemplates/signUpModal.html',
    controller: 'signupModalCtrl'
});

並從那里開始關閉和狀態更改：

angular.module('app').controller('signupModalCtrl', 
     function($uibModalInstance, $state){
         $scope.close = function(){
             $uibModalInstance.dismiss('cancel');
             $state.go('home');
         };
});

HTML：

<a ng-click="close()">
  <button type="button" class="close" aria-label="Close">
       <span aria-hidden="true">&times;</span>
  </button>
</a>

Angular UI-Router路由配置不起作用

問題描述

1 個解決方案

解決方案1
1 已采納 2016-03-09 06:29:41

Angular UI-Router路由配置不起作用

問題描述

1 個解決方案

解決方案1 1 已采納 2016-03-09 06:29:41

解決方案1
1 已采納 2016-03-09 06:29:41