我是angularjs的新手，我创建了带有两个链接的页面 1）对于Modal弹出窗口 2）是一个jsp页面 我的问题是如何在关闭打开的模式弹出窗口后加载上一页。 现在它直接返回主页或索引页面。我希望它回到之前调用模式弹出窗口的地方？ 任何人都可以帮助我克服这个问题吗？ 并提前感谢 代码如下 `
<!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>
答案 0 :(得分：1)
这样做你想要的吗？
在enter个功能中，我添加了var previous = $state.current.name;，然后将$state.transitionTo(...);更改为$state.transitionTo(previous);。
<!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>