Ng-enter in search input box

ionic-v1
1

Hello, I am building an Android app.

I would like to allow the app detect “enter” in search box

Something similar could be found in this

Codepen example by others

I believe the tricks should be done in the ng-enter

I did the similar thing like this

<div id="search-box" class="bar bar-header item-input-inset">
  <div class="item-input-wrapper">
    <i class="icon ion-ios7-search placeholder-icon"></i>
    <input type="search" placeholder="Search" ng-model="data.searchQuery" ng-enter="searchEnter()"/>
    <i class="clear-search icon ion-ios7-close-empty" ng-click="clearSearch()"></i>
  </div>
  <button class="button button-clear" ng-click="clearSearch()">
    Cancel
  </button>
</div>

However, the the searchEnter function did not trigger at all.

I search in google and found this link .

And I added the directive like this

"use strict";

angular.module("directive.general", [])

.directive('disableSideMenu', [
    '$ionicSideMenuDelegate',
    function ($ionicSideMenuDelegate) {
        return {
            restrict: 'A',
            link: function (scope, element) {
                element.on('touch', function () {
                    scope.$apply(function () {
                        $ionicSideMenuDelegate.canDragContent(false);
                    });
                });

                element.on('release', function () {
                    scope.$apply(function () {
                        $ionicSideMenuDelegate.canDragContent(true);
                    });
                });
            }
        };
    }
], '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();
            }
        });
    };
});

However, it is still not working. I am not sure where’s the magic part.

Anyone has ideas ?

2

I found that the directive has to set in this way, and then ng-enter will work

"use strict";


var app = angular.module("directive.general", []);

app.directive('disableSideMenu', [
    '$ionicSideMenuDelegate',
    function ($ionicSideMenuDelegate) {
        return {
            restrict: 'A',
            link: function (scope, element) {
                element.on('touch', function () {
                    scope.$apply(function () {
                        $ionicSideMenuDelegate.canDragContent(false);
                    });
                });

                element.on('release', function () {
                    scope.$apply(function () {
                        $ionicSideMenuDelegate.canDragContent(true);
                    });
                });
            }
        };
    }
]);


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();
            }
        });
    };
});
2 Likes