如何在ui bootstrap中打開另一個模態的模態？

Question

我想通過點擊打開另一個模式「打開我鏈接」

代碼和摘要下面提供。

的script.js

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

angular.module（ '對myApp'）。控制器（ 'mainCtrl'，函數（$範圍，$模態，$日誌）{$ 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> 

Answer 1

你可以做這樣的事情：

在你的控制器

：（與你的控制器注入$模式）

$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登錄：

<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。 我爲我的應用程序使用類似的東西，我可以打開主模式上方的輔助模式。

我希望這會幫助你。