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

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

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-

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

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

angular.module（'myApp'）
.directive（'modalDialog'，function（）{
返回{
限制：'E'，
范围：{
显示：'='
},
replace:true，//替换为下面的模板
transclude:true，//我们希望在指令中插入自定义内容
链接：函数（范围、元素、属性）{
scope.dialogStyle={}；
if（属性宽度）
scope.dialogStyle.width=attrs.width；
if（属性高度）
scope.dialogStyle.height=attrs.height；
scope.hideModal=函数（）{
scope.show=false；
};
},
模板：“”
};
});

您可以拨打

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

及

---

问候

我最终以一种非常明显的方式实现了这一点-我设法在FormCtrl中包含ModalCtrl功能，并简单地将createNewUser（）函数更改为：

$scope.createNewUser=函数（）{

因此，现在当我单击submit时，它将数据发送到服务器，等待它成功，然后打开模式

---

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

一个plunker显示了这一点[或否]这将非常有帮助。当然可以-请参见上面的编辑。查看UI引导模式对话框：我花了相当长的时间试图让UI引导模式一个正常工作-最终我制作了一个自定义的。我不认为这会帮助我从控制器打开它？有了UI引导，你可以将$modal服务注入任何控制器，并用它打开模式$modal.open（）。这似乎不是一种有角度的方式

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

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

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

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

            });

        }