Question

我的AngularJS应用程序中有一个表单。当我点击“提交”时，我想检查信息是否已成功发送到服务器，然后打开模式对话框 - 仅在请求成功时。我认为这意味着我需要从表单使用的控制器中调用模态，但我不知道如何实现这一点。任何人都可以建议吗？我试图在模板控制器中包含模态控制器功能，但它没有用完。

这是我的HTML：

    <div ng-controller = "FormCtrl" >

             <div class="login no padding">

                    <div class="container">

                        <div class="form">

                                <form id = "myForm" name="myForm" role = "form">

                                            <div class="clearfix input-size pull-left category">User Details</div>

                                                    <input class="form-control" type="text" placeholder="Name" name = "name" ng-model="name">

                                                    <input class="form-control" type="text" placeholder="Email" name = "email" ng-model="email">

                                                    <button ng-click="createNewUser()" class="button">SUBMIT</button>



                                            </div>
                                        </div>
                                    </form>
                                </div>

//This is my modal code. It has a button to open the modal, just for testing. I need to open the modal from within my FormCtrl.

                                <div ng-controller='ModalCtrl'>
<button ng-click='toggleModal()'>Open Modal Dialog</button>
<modal-dialog show='modalShown' width='300px' height='40%'>
  <p>Modal Content Here!<p>
  <a href= "#/home" class="link">Get Started...</a>

</modal-dialog>

                </div>

ModalCtrl

angular.module('myApp.controllers')
    .controller('ModalCtrl', ['$scope', function($scope) {
  $scope.modalShown = false;
  $scope.toggleModal = function() {
    $scope.modalShown = !$scope.modalShown;
  };
}]);

FormCtrl

angular.module('myApp.controllers')
    .controller('FormCtrl', ['$scope', 'UsersFactory', '$location', '$route',
        function ($scope, UsersFactory,  $location, $route) {

        // callback for ng-click 'createNewUser':
            $scope.createNewUser = function () {
          // UsersFactory.create($scope.user);

                UsersFactory.create($scope.user).$promise.then(function (users) {
                    $scope.submitted = true;

                    // this is where i need to call the modal open function


                }, function (err) {
                    console.error(err);

                });

            }


        }]);

这是一个JSBin- http://jsbin.com/aDuJIku/257/edit?html,js,output

编辑：这是我的模态指令，如果它有帮助。

angular.module('myApp')
    .directive('modalDialog', function() {
  return {
    restrict: 'E',
    scope: {
      show: '='
    },
    replace: true, // Replace with the template below
    transclude: true, // we want to insert custom content inside the directive
    link: function(scope, element, attrs) {
      scope.dialogStyle = {};
      if (attrs.width)
        scope.dialogStyle.width = attrs.width;
      if (attrs.height)
        scope.dialogStyle.height = attrs.height;
      scope.hideModal = function() {
        scope.show = false;
      };
    },
    template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"
  };
});

Answer 1

我最终以一种非常明显的方式工作 - 我设法在FormCtrl中包含ModalCtrl功能，只需将createNewUser（）函数更改为：

$ scope.createNewUser = function（）{

            UsersFactory.create($scope.user).$promise.then(function (users) {
                $scope.submitted = true;
                $scope.modalShown = !$scope.modalShown;

            }, function (err) {
                console.error(err);

            });

        }

从而彻底消除了toggleModal方法。所以现在当我点击提交时，它会将数据发送到服务器，等待它成功，然后打开模态。

注意：这可能不是实现这一目标的最“有意义”的方式，也不是特别可重用，但我的应用程序似乎有一个奇怪的结构，似乎不适合包含模态对话框的常规方法。

Answer 2

你可以打电话

$('#YourModalId').modal('show');

和

$('#YourModalId').modal('hide');

问候

从AngularJS中的另一个控制器中打开模态

2 个答案: