I have a search form that is displayed within a modal window created using Angular UI Bootstrap. The input fields in the form update the ng-model when submitted.
<script type="text/ng-template" id="mobileSearchPanel">
<form>
<h1 style="text-align:center;">Search</h1>
<div id="mobileSearcher">
<div ng-repeat="attobj in columns">
<input ng-if="attobj.filterable" type="text" class="form-control input-sm" ng-model="filterBy1[attobj.filterkey || attobj.key]" ng-model-options="{ updateOn: 'submit' }" placeholder="{{ attobj.name }}" ng-enter="cancel()" />
</div>
</div>
<input class="phoneSearchSubmitBtn" type="submit" value="submit" style="visibility:hidden;" />
</form>
</script>
The main controller, which includes the rendering of the mobileSearchPanel, contains functions for opening and closing the modal instance:
$scope.showMobileSearchPanel = function (size) {
//console.log($scope);
var modalInstance = $modal.open({
animation: true,
templateUrl: 'mobileSearchPanel',
// controller: 'listController',
size: size,
backdrop: true,
scope: $scope
});
$scope.cancel = function(){
modalInstance.close();
};
};
To enable the use of ng-enter directive, I have the following custom directive:
// this allows to use on element that holds this directive the following.... ng-enter="myFunction()
app.directive('ngEnter', function () {
return function (scope, element, attrs) {
element.bind("keydown keypress", function (event) {
if(event.which === 13) {
scope.$apply(function (){
scope.$eval(attrs.ngEnter);
});
event.preventDefault();
}
});
};
});
The current issue I'm facing is as follows:
-If I remove ng-enter="cancel()", the ng-model updates but I have to close and reopen the modal window each time I want to submit the form again.
-If I keep ng-enter="cancel()", the modal closes with the press of enter key but the submit functionality doesn't work.
I am looking for a solution where both the submit action and the modal closure can be triggered by pressing the enter key, or resolve any underlying issue causing the submit to only work once before requiring the modal to be closed and reopened for further searches.
This problem wouldn't occur if I didn't set "reloadOnSearch:true" in my route path, but I need this setting to ensure different search stages are reflected in the browser history. Removing this setting would resolve the issue at hand but jeopardize maintaining search history in the browser:
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when("/list/:class", {controller: "listController", templateUrl: "DatabaseObject", reloadOnSearch: true}).