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

Question

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. ]

Chagall

Answer 1

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

Lashundalasker

& or @ is not working - someFunction() is not getting executed if used so. – Chagall

@VishwajeetVatharkar try the way i suggested..change your code as i decteted..till then I'll create a plunkr for you – Lashundalasker

making it ngChange() in template is not working either. – Chagall

@VishwajeetVatharkar could you look at the plunkr which I have added in the answer.. – Lashundalasker

@VishwajeetVatharkar Glad to help you..Thanks :) – Lashundalasker

@pankaj-parkerHi, a follow up question, since I'm allowed to post only once per 90 minutes, I'm asking it here plnkr.co/edit/fFSoLmPFDBfNc2oOczZr?p=preview check this plunk, in it, the argument being passed to someFunction() contains unexpected values, sometimes it is undefined, sometimes it has correct value – Chagall

@VishwajeetVatharkar take a look at this plnkr.co/edit/A8YDv0V8HldWh25GmMkW?p=preview , I think you wanted to do this – Lashundalasker

as I'm building a reusable directive, this someModel can be any model, can have different names, how can I make sure to reflect it in the template, as someModel from the directive usage code is same as (or bound together ) the someModel in template code? (it is, right ?) – Chagall

@VishwajeetVatharkar yes you are correct..you could reuse this as reusable component – Lashundalasker

when I use someOtherModel as a model name instead of someModel , the code breaks (as the someModel in usage code is bound to someModel in template) – Chagall

You shouldn't be worry about ng-change thing, It should be ng-change="someFunction(someModel)" instead of ng-change="someFunction(someOtherModel)" because in the end its just a parameter name which going to provide to controller no matter whatever it would be.. checkout this plnkr.co/edit/O1RrW7zJldKyuFJMwrid?p=preview – Lashundalasker

oh! Thanks!! :-) :-) :-) you're awesome!! – Chagall

@VishwajeetVatharkar glad to help you..Look at the answer..which I gave on your other post – Lashundalasker

@VishwajeetVatharkar could you accept & upvote this answer too https://mcmap.net/q/1776510/-how-to-fix-unexpected-arguments-passing-from-a-function-being-on-ng-change-for-select-list – Lashundalasker