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

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

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

来源

2014-03-31 bookthief

一个显示这个在行动[或不]的蹲伏者将会非常有帮助。 – JeffryHouser

当然 - 请参阅上面的编辑。 – bookthief

看看UI-Bootstraps模态对话框：http://angular-ui.github.io/bootstrap/ – rob

我这在最终一个非常明显的方式工作，我设法包括ModalCtrl功能在我的FormCtrl中，并简单地将createNewUser（）函数更改为：

$ scope.createNewUser =函数（）{

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

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

      }); 

     }

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

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

来源

2014-03-31 15:14:09 bookthief

你可以叫

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

和

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

问候

来源

2014-03-31 13:41:00 nilsK

这似乎并不像做这件事的角度 – rob

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

回答

相关问题