Fatal编程技术网
  • angularjs/
  • Angularjs 关闭模式后加载上一页

Angularjs 关闭模式后加载上一页

angularjs jsp

Angularjs 关闭模式后加载上一页,angularjs,jsp,angular-ui-router,Angularjs,Jsp,Angular Ui Router,我是angularjs的新手，我已经创建了带有两个链接的页面 1） 用于模式弹出窗口 2） 是一个jsp页面 我的问题是如何在关闭打开的模式弹出窗口后加载上一页。 现在它直接返回主页或索引页。我想让它回到前一个调用模式弹出窗口的地方？ 有谁能帮我克服这个问题吗？ 先谢谢你 代码写在下面 ` //使用ui.router和ui.bootstrap模块初始化应用程序 var app=angular.module（'app'，['ui.router'，'ui.bootstrap']）； //使返回按钮

我是angularjs的新手，我已经创建了带有两个链接的页面 1） 用于模式弹出窗口 2） 是一个jsp页面 我的问题是如何在关闭打开的模式弹出窗口后加载上一页。 现在它直接返回主页或索引页。我想让它回到前一个调用模式弹出窗口的地方？ 有谁能帮我克服这个问题吗？ 先谢谢你 代码写在下面 `


//使用ui.router和ui.bootstrap模块初始化应用程序
var app=angular.module（'app'，['ui.router'，'ui.bootstrap']）；
//使返回按钮手柄关闭模式
app.run（['$rootScope'，'$modalStack',，
函数（$rootScope$modalStack）{
$rootScope.$on（“$stateChangeStart”，函数（）{
var top=$modalStack.getTop（）；
如果（顶部）{
$modalStack.discouse（顶键）；
}
});
}
]);
//配置stateProvider
app.config（['$stateProvider'，'$urlRouterProvider'，
函数（$stateProvider，$urlRouterProvider）{
//默认页面为“/”（主页）
$urlRouterProvider。否则（'/'）；
//配置路由状态
$stateProvider
//定义回家路线“/”
.州（“家”{
url:“/”
})
.state（'profile'{
url:“/profile”，
templateUrl:'newjsp2.jsp'
})
//定义模式路由“/模式”
.state（“模态”{
url:“/modals”，
//当此路由激活时，触发模式打开
onEnter:[“$stateParams”、“$state”、“$modal”，
函数（$stateparms，$state，$modal）{
$modal
//句柄模式打开
.打开({
摘要：没错，
templateUrl:'modalwindow.jsp'，
背景：错，
控制器：[“$scope”，
职能（$范围）{
//单击“取消”按钮后处理
$scope.cancelModal=函数（）{
$scope.$disclose（）；
};
//单击“确定”按钮后关闭模式
$scope.ok=函数（）{
$scope.$close（真）；
};
},
]
})
//在模态结果后更改路径
.result.then（函数（）{
//单击“确定”按钮后更改路线
$state.transitiono（'home'）；
}，函数（）{
//单击“取消”按钮或单击“背景”后更改路线
$state.transitiono（'home'）；
});
}
]
})
.state（'modals'{
url:“/modals2”，
莫代尔：是的，
//当此路由激活时，触发模式打开
onEnter:[“$stateParams”、“$state”、“$modal”，
函数（$stateparms，$state，$modal）{
$modal
//句柄模式打开
.打开({
templateUrl:'modalwindow2.jsp'，
背景：错，
控制器：[“$scope”，
函数（$scope，$state）{
//单击“取消”按钮后处理
$scope.cancelModal=函数（）{
$scope.$disclose（）；
};
//单击“确定”按钮后关闭模式
$scope.ok=函数（）{
$scope.$close（真）；
};
},
]
})
//在模态结果后更改路径
.result.then（函数（）{
//单击“确定”按钮后更改路线
$state.transitiono（'home'）；
}，函数（）{
//单击“取消”按钮或单击“背景”后更改路线
$state.transitiono（'profile'）；
});
}
]
});
}
])
.run（函数（$rootScope、$location、$state）{
$rootScope.$location=$location；
警报（位置）
$rootScope.$state=$state；
});
.模态对话框{
宽度：100%！重要；
保证金：0px！重要；
}
.模态体{
垫底：488px；
}
“

这是你想要的吗

在
中输入我添加的
var-previous=$state.current.name$state.transition更改为（…）到
$state.transitiono（上一个）



//使用ui.router和ui.bootstrap模块初始化应用程序
var app=angular.module（'app'，['ui.router'，'ui.bootstrap']）；
//使返回按钮手柄关闭模式
app.run（['$rootScope'，'$modalStack',，
函数（$rootScope$modalStack）{
$rootScope.$on（“$stateChangeStart”，函数（）{
var top=$modalStack.getTop（）；
如果（顶部）{
$modalStack.discouse（顶键）；
}
});
}
]);
//配置stateProvider
app.config（['$stateProvider'，'$urlRouterProvider'，
函数（$stateProvider，$urlRouterProvider）{
//默认页面为“/”（主页）
$urlRouterProvider。否则（'/'）；
//配置路由状态
$stateProvider
//定义回家路线“/”
.州（“家”{
url:“/”
})
.state（'profile'{
url:“/profile”，
templateUrl:'newjsp2.jsp'
})
//定义模式路由“/模式”
.state（“模态”{
U

<!DOCTYPE html>
<html lang="en" ng-app="app">

<head>
  <meta charset="UTF-8">
  <script src="css/style.css"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
  <script>

    // init the app with ui.router and ui.bootstrap modules
    var app = angular.module('app', ['ui.router', 'ui.bootstrap']);

    // make back button handle closing the modal
    app.run(['$rootScope', '$modalStack',
      function($rootScope, $modalStack) {
        $rootScope.$on('$stateChangeStart', function() {
          var top = $modalStack.getTop();
          if (top) {
            $modalStack.dismiss(top.key);
          }
        });
      }
    ]);

    // configure the stateProvider
    app.config(['$stateProvider', '$urlRouterProvider',
      function($stateProvider, $urlRouterProvider) {

        // default page to be "/" (home)
        $urlRouterProvider.otherwise('/');

        // configure the route states
        $stateProvider

          // define home route "/"
          .state('home', {
            url: '/'
          })
          .state('profile', {
            url: '/profile',
            templateUrl:'newjsp2.jsp'
          })

          // define modal route "/modal"
          .state('modal', {
            url: '/modals',

            // trigger the modal to open when this route is active
            onEnter: ['$stateParams', '$state', '$modal',
              function($stateParams, $state, $modal) {
                $modal

                  // handle modal open
                  .open({
                    abstract: true,
                    templateUrl: 'modalwindow.jsp',
                    backdrop: false,
                    controller: ['$scope',
                      function($scope) {

                        // handle after clicking Cancel button
                        $scope.cancelModal = function() {
                          $scope.$dismiss();
                        };
                        // close modal after clicking OK button
                        $scope.ok = function() {
                          $scope.$close(true);
                        };
                      },

                    ]
                  })

                  // change route after modal result
                  .result.then(function() {
                    // change route after clicking OK button
                    $state.transitionTo('home');
                  }, function() {
                    // change route after clicking Cancel button or clicking background
                    $state.transitionTo('home');
                  });

              }
            ]

          })
          .state('modals', {
            url: '/modals2',
            modal:true,
            // trigger the modal to open when this route is active
            onEnter: ['$stateParams', '$state', '$modal',
              function($stateParams, $state, $modal) {
                $modal

                  // handle modal open
                  .open({
                    templateUrl: 'modalwindow2.jsp',
                    backdrop: false,
                    controller: ['$scope',
                      function($scope,$state) {
                        // handle after clicking Cancel button
                        $scope.cancelModal = function() {
                          $scope.$dismiss();

                        };
                        // close modal after clicking OK button
                        $scope.ok = function() {
                          $scope.$close(true);
                        };
                      },

                    ]
                  })

                  // change route after modal result
                  .result.then(function() {
                    // change route after clicking OK button

                    $state.transitionTo('home');
                  }, function() {
                    // change route after clicking Cancel button or clicking background
                    $state.transitionTo('profile');
                  });

              }
            ]

          });
      }
    ])
    .run(function($rootScope, $location, $state) {
  $rootScope.$location = $location;
  alert(location)
  $rootScope.$state = $state;
});
  </script>
</head>

<body style="background-color: chocolate">

    <a href="#/modals" class="btn btn-default">POPUP---->1</a>
    <a href="#/modals2" class="btn btn-default">POPUP-->2</a>
    <a href="#/profile" class="btn btn-default">Profile!</a>

  <div ui-view></div>

</body>
<style>
     .modal-dialog{
          width: 100% !important;
          margin: 0px !important;
      }
      .modal-body{
          padding-bottom:488px;
      }
</style>
</html>



<!DOCTYPE html>
<html lang="en" ng-app="app">

<head>
  <meta charset="UTF-8">
  <script src="css/style.css"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
  <script>

    // init the app with ui.router and ui.bootstrap modules
    var app = angular.module('app', ['ui.router', 'ui.bootstrap']);

    // make back button handle closing the modal
    app.run(['$rootScope', '$modalStack',
      function($rootScope, $modalStack) {
        $rootScope.$on('$stateChangeStart', function() {
          var top = $modalStack.getTop();
          if (top) {
            $modalStack.dismiss(top.key);
          }
        });
      }
    ]);

    // configure the stateProvider
    app.config(['$stateProvider', '$urlRouterProvider',
      function($stateProvider, $urlRouterProvider) {

        // default page to be "/" (home)
        $urlRouterProvider.otherwise('/');

        // configure the route states
        $stateProvider

          // define home route "/"
          .state('home', {
            url: '/'
          })
          .state('profile', {
            url: '/profile',
            templateUrl:'newjsp2.jsp'
          })

          // define modal route "/modal"
          .state('modal', {
            url: '/modals',

            // trigger the modal to open when this route is active
            onEnter: ['$stateParams', '$state', '$modal',
              function($stateParams, $state, $modal) {
                var previous = $state.current.name;

                $modal

                  // handle modal open
                  .open({
                    abstract: true,
                    templateUrl: 'modalwindow.jsp',
                    backdrop: false,
                    controller: ['$scope',
                      function($scope) {

                        // handle after clicking Cancel button
                        $scope.cancelModal = function() {
                          $scope.$dismiss();
                        };
                        // close modal after clicking OK button
                        $scope.ok = function() {
                          $scope.$close(true);
                        };
                      },

                    ]
                  })

                  // change route after modal result
                  .result.then(function() {
                    // change route after clicking OK button
                    $state.transitionTo(previous);
                  }, function() {
                    // change route after clicking Cancel button or clicking background
                    $state.transitionTo(previous);
                  });

              }
            ]

          })
          .state('modals', {
            url: '/modals2',
            modal:true,
            // trigger the modal to open when this route is active
            onEnter: ['$stateParams', '$state', '$modal',
              function($stateParams, $state, $modal) {
                var previous = $state.current.name;

                $modal

                  // handle modal open
                  .open({
                    templateUrl: 'modalwindow2.jsp',
                    backdrop: false,
                    controller: ['$scope',
                      function($scope,$state) {
                        // handle after clicking Cancel button
                        $scope.cancelModal = function() {
                          $scope.$dismiss();

                        };
                        // close modal after clicking OK button
                        $scope.ok = function() {
                          $scope.$close(true);
                        };
                      },

                    ]
                  })

                  // change route after modal result
                  .result.then(function() {
                    // change route after clicking OK button

                    $state.transitionTo(previous);
                  }, function() {
                    // change route after clicking Cancel button or clicking background
                    $state.transitionTo(previous);
                  });

              }
            ]

          });
      }
    ])
    .run(function($rootScope, $location, $state) {
  $rootScope.$location = $location;
  alert(location)
  $rootScope.$state = $state;
});
  </script>
</head>

<body style="background-color: chocolate">

    <a href="#/modals" class="btn btn-default">POPUP---->1</a>
    <a href="#/modals2" class="btn btn-default">POPUP-->2</a>
    <a href="#/profile" class="btn btn-default">Profile!</a>

  <div ui-view></div>

</body>
<style>
     .modal-dialog{
          width: 100% !important;
          margin: 0px !important;
      }
      .modal-body{
          padding-bottom:488px;
      }
</style>
</html>