- 首页
- 其他开发
- 如何在ui bootstrap中从另一个模态打开模态?
如何在ui bootstrap中从另一个模态打开模态?
[英] how to open modal from another modal in ui bootstrap?
本文介绍了如何在ui bootstrap中从另一个模态打开模态?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想通过点击打开我的链接"来打开另一个模态
下面提供了代码和片段.
script.js
angular.module('myApp', ['ui.bootstrap','angular-drawer']);
angular.module('myApp').controller('mainCtrl', function ($scope, $modal, $log) {$scope.open = function () {
$modal.open({templateUrl: 'myModalContent.html',背景:真实,窗口类:'模态',控制器:函数($scope,$modalInstance,$log,user){$scope.user = 用户;$scope.submit = 函数 () {$log.log('提交用户信息');$log.log(用户);$modalInstance.dismiss('cancel');}$scope.cancel = 函数 () {$modalInstance.dismiss('cancel');};},解决: {用户:函数(){返回 $scope.user;}}});};$scope.open1 = 函数 () {$modal.open({templateUrl: 'myModalContent1.html',背景:真实,窗口类:'模态',控制器:函数($scope,open,$modalInstance,$log,user){$scope.opensignup=function () {$modalInstance.dismiss('cancel');};$scope.user = 用户;$scope.submit = 函数 () {$log.log('提交用户信息');$log.log(用户);$modalInstance.dismiss('cancel');}$scope.cancel11 = 函数 () {$modalInstance.dismiss('cancel');};},解决: {用户:函数(){返回 $scope.user;}}});};
});
html
<script type="text/ng-template" id="myModalContent1.html"><div class="modal-header"><h3>我是模态11111111111111111111111!</h3>
<form ng-submit="submit()"><div class="modal-body"><label>用户名</label><input type="text" ng-model="user.user"/><label>密码</label><input type="password" ng-model="user.password"/>
<button class="btn" ng-click="cancel()">打开我!</button><div class="modal-footer"><a class="btn btn-warning" ng-click="cancel()">取消</a><input type="submit" class="btn primary-btn" value="Submit"/>
</表单><button class="btn" ng-click="open()">打开我!</button>
解决方案
你可以这样做:
在你的控制器中:(在你的控制器中注入了 $modal)
$scope.openLogin = function () {var modalInstance = $modal.open({templateUrl: 'login.html',控制器:$scope.modalLogin});}$scope.modalLogin = function ($scope, $modalInstance) {//编辑关闭模态登录$scope.modalLoginInstance = $modalInstance;$scope.cancelLogin = 函数 () {$modalInstance.dismiss('cancel');}}$scope.login = 函数 () {//您的登录密码}$scope.openMe = function(){var modalInstance = $modal.open({templateUrl: 'openMe.html',控制器:$scope.modalOpenMe});}$scope.modalOpenMe = 函数($scope,$modalInstance){//编辑关闭模态登录$scope.modalLoginInstance.dismiss('cancel');$scope.cancelOpenMe = 函数 () {$modalInstance.dismiss('cancel');}}
在用于登录的 html 中:
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="cancelLogin()"><span aria-hidden="true">×</span></button><h2 class="modal-title">您的标题</h2>
<div class="modal-body">//您的登录表单//对于链接openMe绑定方法openMe with ng-click
<div class="modal-footer">//你的页脚
创建您的模板 openMe.我在我的应用程序中使用了这样的东西,我可以打开主模态上方的辅助模态.
希望对你有所帮助.
i want to open a another modal by clicking on "open me link"
the code and snippet are provided below.
script.js
angular.module('myApp', ['ui.bootstrap','angular-drawer']);
angular.module('myApp').controller('mainCtrl', function ($scope, $modal, $log) {
$scope.open = function () {
$modal.open({
templateUrl: 'myModalContent.html',
backdrop: true,
windowClass: 'modal',
controller: function ($scope, $modalInstance, $log, user) {
$scope.user = user;
$scope.submit = function () {
$log.log('Submiting user info.');
$log.log(user);
$modalInstance.dismiss('cancel');
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
user: function () {
return $scope.user;
}
}
});
};
$scope.open1 = function () {
$modal.open({
templateUrl: 'myModalContent1.html',
backdrop: true,
windowClass: 'modal',
controller: function ($scope,open, $modalInstance, $log, user) {
$scope.opensignup=function () {
$modalInstance.dismiss('cancel');
};
$scope.user = user;
$scope.submit = function () {
$log.log('Submiting user info.');
$log.log(user);
$modalInstance.dismiss('cancel');
}
$scope.cancel11 = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
user: function () {
return $scope.user;
}
}
});
};
});
html
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<form ng-submit="submit()">
<div class="modal-body">
<label>User name</label>
<input type="text" ng-model="user.user" />
<label>Password</label>
<input type="password" ng-model="user.password" />
</div>
<a ng-click="opensignup()">Open me!</a>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel11()">Cancel</button>
<input type="submit" class="btn primary-btn" value="Submit" />
</div>
</form>
</script>
<script type="text/ng-template" id="myModalContent1.html">
<div class="modal-header">
<h3>I'm a modal11111111111111111111111!</h3>
</div>
<form ng-submit="submit()">
<div class="modal-body">
<label>User name</label>
<input type="text" ng-model="user.user" />
<label>Password</label>
<input type="password" ng-model="user.password" />
</div>
<button class="btn" ng-click="cancel()">Open me!</button>
<div class="modal-footer">
<a class="btn btn-warning" ng-click="cancel()">Cancel</a>
<input type="submit" class="btn primary-btn" value="Submit" />
</div>
</form>
</script>
<button class="btn" ng-click="open()">Open me!</button>
解决方案
You can do something like this :
in your controller :(with $modal injected in your controller)
$scope.openLogin = function () {
var modalInstance = $modal.open({
templateUrl: 'login.html',
controller: $scope.modalLogin
});
}
$scope.modalLogin = function ($scope, $modalInstance) {
//edit to close modal login
$scope.modalLoginInstance = $modalInstance;
$scope.cancelLogin = function () {
$modalInstance.dismiss('cancel');
}
}
$scope.login = function () {
//Your code to login
}
$scope.openMe = function(){
var modalInstance = $modal.open({
templateUrl: 'openMe.html',
controller: $scope.modalOpenMe
});
}
$scope.modalOpenMe = function ($scope, $modalInstance) {
//edit to close modal login
$scope.modalLoginInstance.dismiss('cancel');
$scope.cancelOpenMe = function () {
$modalInstance.dismiss('cancel');
}
}
In your html for login:
<div ng-controller="YourController">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="cancelLogin()"><span aria-hidden="true">×</span></button>
<h2 class="modal-title">Your Title</h2>
</div>
<div class="modal-body">
//your login form
//For link openMe bind method openMe with ng-click
</div>
<div class="modal-footer">
//your footer
</div>
create your template openMe.
I use something like this for my application and I can open the secondary modal above the primary modal.
I hope this will help you.
这篇关于如何在ui bootstrap中从另一个模态打开模态?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!