如何从用户界面引导中的另一个模式打开模式?

本文介绍了如何从用户界面引导中的另一个模式打开模式?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想通过单击打开我的链接"打开另一个模式

下面提供了代码和代码段.

the code and snippet are provided below.

script.js

angular.module('myApp', ['ui.bootstrap','angular-drawer']);

angular.module('myApp').controller('mainCtrl'，函数($ scope，$ modal，$ log){ $ scope.open = function(){

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>

推荐答案

您可以执行以下操作:

在您的控制器中:(在您的控制器中注入了$ modal)

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'); } }

在用于登录的html中:

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">&times;</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>

创建模板openMe. 我在应用程序中使用了类似的内容，并且可以在主要模式上方打开次要模式.

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.