從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的另一個控制器中打開一個模式

回答

相關問題