Как привязать несколько событий к одному входу и заставить его работать в AngularJS гармонично?

Question

Как привязать несколько событий к одному входу и заставить его работать в AngularJS гармонично?

0

У меня есть значение в поле ввода, которое необходимо отправить на сервер для извлечения связанных значений и для отображения в виде выпадающего списка ниже.

Вызов api должен запускаться в трех условиях после того, как пользователь ввел значение

Пользователь может нажать значок поиска
Пользователь может нажать клавишу ввода
Если пользователь не выполнил ни одну из двух вышеуказанных опций, мне нужно автоматически активировать вызов api после простоя 3 секунды

Ниже приведена разделенная версия кода, который у меня есть без вызовов api. Я также создал кодекс для этого

<html ng-app="myApp">
  <head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  </head>
  <body ng-controller="MyCtrl">

    <input type="text" ng-model="name"
           ng-change="actualWork('ngChange')" enter-key="actualWork('enterKey')" ng-model-options="{debounce : 3000}"/>
    <button ng-click="actualWork('click')">Do Work</button>
    {{message}}

<script>
angular.module('myApp',[]);

    angular.module('myApp')
    .controller('MyCtrl',function($scope){
     $scope.name = "Test";
      $scope.actualWork = function(source){
        $scope.message = $scope.name + " from "+source;
      }

    });

    angular.module('myApp')
    .directive('enterKey', function () {
            return function (scope, element, attrs) {
                element.bind("keydown keypress", function (event) {
                    if (event.which === 13) {
                        scope.$apply(function () {
                            scope.$eval(attrs.enterKey);
                        });

                        event.preventDefault();
                    }
                });
            };
        });
</script>
  </body>
</html>

В приведенном выше коде ng-change будет запущен даже независимо от того, нажимает ли пользователь кнопку или вводит ключ.

Кто-нибудь дает мне знать, как остановить ng-change от стрельбы, если нажать кнопку ввода /?

благодаря

Umamaheswaran 19 авг. 2016, в 11:03

Источник

Теги:

angularjs

1 ответ

Ещё вопросы

Michael Rosales · Accepted Answer · 2016-08-19T07-39-00.000Z

http://codepen.io/ehmssss/pen/EyJmVE?editors=1010#anon-signup

<html ng-app="myApp">
  <head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  </head>
  <body ng-controller="MyCtrl">
    <form ng-submit="actualWork('enter')">
    <input type="text" ng-model="name"
           ng-change="actualWork('ngChange')" ng-model-options="{debounce : 5000}"/>
    </form>
    <button type='submit' ng-click="actualWork('click')">Do Work</button>
    {{message}}
  </body>

я отделил кнопку и добавил форму submit