0

I'm trying to create a directive to replace a bunch of identical inputs

(function () {
  angular
    .module('myModule')
    .directive('pageSearchInput', PageSearchInputDirective);

  function PageSearchInputDirective() {
    return {
      restrict: 'E',
      require: 'ngModel',
      scope: {
        ngModel: '=',
        ngChange: '&'
      },
      replace: true,
      template:
        `<input type="text" ng-model-options="{debounce: 1000}" ng-model="ngModel" ng-change="ngChange()">`
    };
  }
}());

And here is usage example:

<page-search-input ng-model="keyword" ng-change="someFunction()"></page-search-input>

And in my controller

$scope.keyword = '';
$scope.someFunction = function() {
    console.log($scope.keyword);
};

So my problem is that $scope.keyword is one step behind. When I type the following

a ab abc

Console log gives me

'' a ab

And if I simply put

<input type="text" ng-model-options="{debounce: 1000}" ng-model="keyword" ng-change="someFunction()">

into my template everything works perfect.

Any ideas, please?

Majesty
  • 2,097
  • 5
  • 24
  • 55

0 Answers0