Question

我想通过点击“打开我链接”打开另一个模式

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

的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>

Answer 1

您可以这样做：

控制器中的

:(在控制器中注入$ modal）

  $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。我在我的应用程序中使用这样的东西，我可以打开主模态上面的辅助模态。

我希望这会对你有所帮助。

如何从ui bootstrap中的另一个模态打开模态？

1 个答案: