我在表单中有一个输入和一个按钮。
我想输入输入并按Enter键,提交输入内容并触发打开模式,显示结果。我不知道如何在没有获得自定义/ hacky的情况下触发ng-submit模式。这样做是否有理解的方法?
目前:
<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">×</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>
我尝试将典型的模态触发器属性放在表单元素中,但只要单击表单内的输入,就会立即触发模态。
答案 0 :(得分:1)
在下面的示例中,我创建了自己的模态指令。
<强> 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">×</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;
});
});
}
};
});
您可以使用ui-bootstrap
以及@Pankaj Parkar建议。
答案 1 :(得分:1)
所以假设你不想要一个特殊的按钮来弹出模态,并且只是ngSubmit引导方式(而且没有得到hacky),你需要修改你的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
放在了{-1}}中,其中包含ng-controller。
最后将脚本修改为以下内容:
<div>
这样,当ng-submit完成其任务时,它会自动初始化模态,你可以使用$scope.submit = function (){
.
.
.
$('#searchModal').modal('show');
}
来绑定数据。
结帐Modals。
答案 2 :(得分:1)
正如评论中所提到的,最好使用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>