javascriptangularjsangularjs-directiveangularjs-scopeangularjs-service

angucomplete fire event when value is selected in Angular.js


I'm trying to enable ng-change event for this custom Angular.js directive angucomplete

This is how I declare the directive in my html file:

    <angucomplete id="Angucomplete1" placeholder="Type 3 letters to start" pause="100" 
selectedobject="selectedCountry" localdata="datasearch" ng-model="modelCountry" searchfields="name" 
titlefield="name" minlength="3" inputclass="form-control form-control-small" matchclass="highlight" />

I tried putting ng-change="myFunction()" here which is part of the controller but its not firing at all.

Furthermore, I've tried putting ng-change attribute in the actual directive code as well, but it doesn't work as well:

   template: '<div class="angucomplete-holder"><input id="{{id}}_value" ng-change="myFunction()" ng-model="searchStr" type="text" placeholder="{{placeholder}}" class="{{inputClass}}" ng-focus="resetHideResults()" /></div>'

Any idea how I can fire event when the actual input value is changed in the textbox?


Solution

  • Try angucomplete-alt that I forked from angucomplete, fixed lots of bugs, and added extra features: http://ghiden.github.io/angucomplete-alt/#example10

    Attribute names are different for angucomplete-alt. So you you need to change yours like this.

    <angucomplete-alt id="Angucomplete1" placeholder="Type 3 letters to start" pause="100" 
    selected-object="selectedCountry" local-data="datasearch" search-fields="name" 
    title-field="name" minlength="3" input-class="form-control form-control-small" matchclass="highlight"/>