在窗体ngsubmit上触发模态？

Question

我在窗体中有一个输入和一个按钮。

我想输入输入内容并按回车键，提交输入内容并触发模式打开，显示结果。我不知道如何触发ng-submit上的模式，而不会得到自定义/ hacky。有没有一个理解的方法来做到这一点？

目前：

<form> 
    <div ng-show="thirdPhase" class="input-group animated fadeIn"> 
     <input type="text" class="form-control finderBar" placeholder="City, State..." autofocus> 
     <span class="input-group-btn"> 
      <button data-toggle="modal" data-target="#searchModal" class="btn btn-default" type="button">Go!</button> 
     </span> 
    </div> 
</form> 

和模态：

<div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Search Results</h4> 
     </div> 
     <div class="modal-body"> 
     TEST SEARCH MODAL 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

我试图把典型模式触发表单元素属性，但只是一旦触发模式，你点击表单内的输入。

Answer 1

因此，假如你不想模态一个特殊的按钮，从弹出，只是ngSubmit带路（并没有得到哈克），你需要修改你的HTML喜欢的东西对此，

<div ng-controller="whateverYouWant" data-target="#searchModal" data-toggle="modal"> 
     <form ng-submit="submit()"> 
      <div ng-show="thirdPhase" class="input-group animated fadeIn"> 
       <input type="text" class="form-control 
finderBar" placeholder="City, State..." autofocus> 
       <span class="input-group-btn"> 
       </span> 
      </div> 
     </form> 
    </div> 

请注意，我从HTML删除<button>，把data-target和data-modal在<div>已NG-控制器。

最后修改你的脚本是这样的：

$scope.submit = function(){ 
. 
. 
. 
$('#searchModal').modal('show'); 
} 

有了这个，当NG提交完成了它的任务，它会自动初始化模式，您可以使用ng-modal来绑定数据。

结帐Modals。

Answer 2

在下面的例子中，我创建了我自己的模态指令。

HTML：

<div ng-controller="MainCtrl" class="container"> 
    <h1>Modal example</h1> 
    <form ng-submit="toggleModal()"> 
     <div class="input-group animated fadeIn"> 
      <input type="text" class="form-control finderBar" placeholder="City, State..." autofocus> 
      <span class="input-group-btn"> 
       <button class="btn btn-default" type="submit">Go!</button> 
      </span> 
     </div> 
    </form> 

    <modal title="Search Results" visible="showModal"> 
     TEST SEARCH MODAL 
    </modal> 
</div> 

JS：

var mymodal = angular.module('mymodal', []); 

mymodal.controller('MainCtrl', function ($scope) { 
    $scope.showModal = false; 
    $scope.toggleModal = function(){ 
     $scope.showModal = !$scope.showModal; 
    }; 
}); 

mymodal.directive('modal', function() { 
    return { 
     template: '<div class="modal fade">' + 
      '<div class="modal-dialog">' + 
      '<div class="modal-content">' + 
       '<div class="modal-header">' + 
       '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
       '<h4 class="modal-title">{{ title }}</h4>' + 
       '</div>' + 
       '<div class="modal-body" ng-transclude></div>' + 
      '</div>' + 
      '</div>' + 
     '</div>', 
     restrict: 'E', 
     transclude: true, 
     replace:true, 
     scope:true, 
     link: function postLink(scope, element, attrs) { 
     scope.title = attrs.title; 

     scope.$watch(attrs.visible, function(value){ 
      if(value == true) 
      $(element).modal('show'); 
      else 
      $(element).modal('hide'); 
     }); 

     $(element).on('shown.bs.modal', function(){ 
      scope.$apply(function(){ 
      scope.$parent[attrs.visible] = true; 
      }); 
     }); 

     $(element).on('hidden.bs.modal', function(){ 
      scope.$apply(function(){ 
      scope.$parent[attrs.visible] = false; 
      }); 
     }); 
     } 
    }; 
}); 

http://jsfiddle.net/s9472gcj/

您可以使用ui-bootstrap以及@Pankaj Parkar建议。

欲了解更多信息https://angular-ui.github.io/bootstrap/#/modal

Answer 3

正如评论中提到的那样，最好使用angular-ui-bootstrap。

然后你可以创建一个工厂来创建你的模态，你可以从你的第一个modalInstanceController的方法打开结果模态。

演示中的工厂非常基础，可以进行改进，例如，传递带有参数的控制器名称以避免硬编码的控制器名称。

请看看下面的演示或在这jsfiddle。

angular.module('ui.bootstrap.demo', ['ui.bootstrap']) 
 
    .factory('modalFactory', function($uibModal) { 
 
    return { 
 
     open: function(size, template, params) { 
 
     return $uibModal.open({ 
 
      animation: true, 
 
      templateUrl: template || 'myModalContent.html', 
 
      controller: 'ModalResultInstanceCtrl', 
 
      size: size, 
 
      resolve: { 
 
      params: function() { 
 
       return params; 
 
      } 
 
      } 
 
     }); 
 
     } 
 
    }; 
 
    }) 
 
    .controller('ModalDemoCtrl', function($rootScope, $scope, $log, $uibModal) { 
 

 
    //$scope.items = ['item1', 'item2', 'item3']; 
 

 
    //$scope.animationsEnabled = true; 
 

 
    $scope.open = function(size, template) { 
 
     var modalInstance = $uibModal.open({ 
 
      animation: $scope.animationsEnabled, 
 
      templateUrl: template || 'myModalContent.html', 
 
      controller: 'ModalInstanceCtrl', 
 
      size: size 
 
     }); 
 

 
     /*modalInstance.result.then(function(selectedItem) { 
 
     $scope.selected = selectedItem; 
 
     }, function() { 
 
     $log.info('Modal dismissed at: ' + new Date()); 
 
     });*/ 
 
    }; 
 

 
    $scope.toggleAnimation = function() { 
 
     $scope.animationsEnabled = !$scope.animationsEnabled; 
 
    }; 
 

 
    }); 
 

 
// Please note that $modalInstance represents a modal window (instance) dependency. 
 
// It is not the same as the $uibModal service used above. 
 

 
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function($scope, $uibModalInstance, modalFactory) { 
 

 
    //$scope.searchTerm = term; 
 

 
    $scope.ok = function() { 
 
    modalFactory.open('lg', 'result.html', {searchTerm: $scope.searchTerm}); 
 
    //$uibModalInstance.close($scope.searchTerm); 
 
    }; 
 

 
    $scope.cancel = function() { 
 
    $uibModalInstance.dismiss('cancel'); 
 
    }; 
 
}); 
 

 
angular.module('ui.bootstrap.demo').controller('ModalResultInstanceCtrl', function($scope, $uibModalInstance, params) { 
 

 
    $scope.searchTerm = params.searchTerm; 
 

 
    $scope.ok = function() { 
 
    $uibModalInstance.close($scope.searchTerm); 
 
    }; 
 

 
    $scope.cancel = function() { 
 
    $uibModalInstance.dismiss('cancel'); 
 
    }; 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script> 
 
<div ng-app="ui.bootstrap.demo"> 
 
    <div ng-controller="ModalDemoCtrl"> 
 
    <script type="text/ng-template" id="myModalContent.html"> 
 
     <div class="modal-header"> 
 
     <h3 class="modal-title">I'm a modal!</h3> 
 
     </div> 
 
     <div class="modal-body"> 
 
     Demo form submit: 
 
     <br/> 
 
     <form ng-submit="ok()"> 
 
      <div class="input-group animated fadeIn"> 
 
      <input type="text" class="form-control finderBar" ng-model="searchTerm" placeholder="City, State..." autofocus> 
 
      <span class="input-group-btn"> 
 
      <button class="btn btn-default" type="button" ng-click="ok()">Go!</button> 
 
     </span> 
 
      </div> 
 
     </form> 
 

 
     </div> 
 
     <div class="modal-footer"> 
 
     <button class="btn btn-primary" type="button" ng-click="ok()">OK</button> 
 
     <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> 
 
     </div> 
 
    </script> 
 

 
    <script type="text/ng-template" id="result.html"> 
 
     <div class="modal-header"> 
 
     <h3 class="modal-title">I'm a modal!</h3> 
 
     </div> 
 
     <div class="modal-body"> 
 
     You searched for: {{searchTerm}} 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button class="btn btn-primary" type="button" ng-click="cancel()">Close</button> 
 
     </div> 
 
    </script> 
 
    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button> 
 
    <!--<button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>--> 
 
    <div ng-show="searchTerm">searchTerm from a modal: {{ searchTerm }}</div> 
 
    </div> 
 

 
</div>