CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scopeng-options
Vishwajeet Vatharkar
Vishwajeet Vatharkar

Reputation: 1196

How to implement ng-change for custom directive for select list?

My directive usage code

       <input-select ng-model="someModel" ng-change="someFunction()"
   options="countries"></input-select>

My directive code

 .directive('inputSelect', function () {
    return {
        templateUrl: 'someTemplate.html',
        restrict: 'E',
        scope: {
            ngModel: '=',
            ngChange: '='
        }
    };
});

My directive template

    <select 
            ng-model="ngModel" ng-init="ngModel "
            ng-options="option[optionId] as option[optionName] for option in options"
            ng-change="ngChange">
    </select>

So, when the selected item is changed, the function someFunction() is getting called for infinite times (although the change is done once), what should be changed in order to make sure someFunction() get's called only once ( someFunction() is a function in the scope of the controller in which the directive is being used )

[ I did try using & and @ for the scope type of ngChange, somefunction() doesn't get fired if using those. ]

Upvotes: 6

Views: 6591

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

You should use & which is used for expression and from markup you could call that method like ngChange() instead of ngChange only

Markup

  <select 
        ng-model="ngModel" ng-change="ngChange()"
        ng-options="option[optionId] as option[optionName] for option in options">
  </select>

Code

scope: {
   ngModel: '=',
   ngChange: '&'
}

Example Plunkr

Upvotes: 7

Related Questions