Pass a dynamic listener to ng-change

Question

I want my directive to support ng-change events but instead of defining a particular function to call when ng-change is triggered, I want to enable ng-change to take any sort of function with single or multiple parameters and execute it. I could think of of two ways but dont know which is right or which will work. it goes something like this:

Method 1:

HTML:

<currency-input width="200px"  id="iextz" ng-model="currency1" ng-change="someFunction(argument1,argument2,.....)" currency="$" decimals="2"></currency-input>

JS:

numericApp.directive('currencyInput',........
   ...................................
   return {
                restrict: 'E',
                scope:{
                    ngModel : "=",
                    id : "@"
                },
   link: function($scope, $elm, $attrs) {
    ........................................
    *//some logic to execute the function passed to ng-change*
    executeNgChangeFucntion(){
     ...........
     ...........
    };
    }]);

Method 2

HTML:

<currency-input width="200px"  id="iextz" ng-model="currency1" ng-change="change(someFunctionWithArguments)" currency="$" decimals="2"></currency-input>

JS:

 numericApp.directive('currencyInput',........
       ...................................
       return {
                    restrict: 'E',
                    scope:{
                        ngModel : "=",
                        id : "@"
                    },
       link: function($scope, $elm, $attrs) {
        ........................................
        //ng-change handler
         $scope.change = function(someFunctionWithArguments){
             //execute someFuncitonWithArguments
               ..........................
           };
        }]);

I'm not really experienced in advanced concepts of AngularJS, so whatever I could think of I put it out here. It would be a great help if someone could provide some inputs. Thanks in advance!

Actually I'm building a numeric field component which would take in numbers and format it according to the set currency, set decimal digits etc., that sort of stuff, anyway the important part is that it's for someone else to use(let's say a client). Folks can use this component in their application and they need to process whatever input comes into the field with ng-change. They have their own event handlers. It could be anything. So I need to provide a way so that they can pass one of their functions to be executed whenever the input changes(as in what happens with n-change). For ex.:

<decimal-input ng-model="employees.calculatedChangeAmounts[job.id][jobChangeReasonCodes[$index]].changeAmount" decimals="2" ng-change="recalculate.salaryAmount($index, job)"></decimal-input>

I hope that helps in clearing any doubts. Now please help in solving mine, thanks!

Go with first approach but your someFunction(arg...) should exist in Controller. — Bettimms, May 05 '16 at 12:45
Method 1 in your question is the standard behavior of `ng-change`. It will call `someFunction` with the arguments specified in the HTML whenever the input changes. So it can take any function with any arguments as defined in the HTML, as long as all of them are in the scope. Can you elaborate on what sort of criteria will affect the function that gets called? — Jack A., May 05 '16 at 12:54
Hello there.....I edited the question to further elaborate my requirement but since then there has been no further development on this thread. I'd appreciate if folks here would help me out. — Rtr Snehil Singh, May 08 '16 at 18:03

score 2 · Accepted Answer · edited May 23 '17 at 12:16

If the only purpose of your directive is to format the input, you might be better off using one of the existing masked input directives. For example: https://github.com/angular-ui/ui-mask.

If you decide that you definitely need to create a new directive, you probably want to implement it using the NgModelController. This is the standard way to implement full support for two-way binding and validation in a directive. In addition to custom binding, ng-change works directly with ng-model to receive change notifications.

The user of your directive will bind to a model in their scope using ng-model, then process the changed value of their model using ng-change. For example:

<currency-input ng-model="item.currencyValue" ng-change="process(item.currencyValue)">
</currency-input>

(Remember to always have a dot in your ng-model bindings.)

score 0 · Answer 2 · answered May 05 '16 at 12:48

If the directive is input, then you can consider this (or your 1st approach by defining someFunction(arg...) in your controller).

numericApp.directive('currencyInput',........
   ...................................
   return {
                restrict: 'E',
                scope:{
                    ngModel : "=",
                    id : "@"
                },
   link: function($scope, $elm, $attrs) 
{
    $elm.bind("change",function(evt){
        alert("Value changed");
    });  

    }]);

score 0 · Answer 3 · answered May 05 '16 at 13:25

I am not sure if i understood the first method, but the second one seems close to how ng-changed "should" be used.

My HTML

<p>My phone is {{phoneNumber}} !</p>
<p>Increment the phone number below:</p>
<input type="checkbox" ng-model="checkBoxData" ng-change="changeNumber(myShitVar)" />

My controller

app.controller('MainCtrl', ['$scope', function($scope) {
$scope.phoneNumber = 23323123;

$scope.changeNumber = function(myShitVar) {
if (!myShitVar) {
  $scope.phoneNumber++;
}
};

If you want to add a variable amount of arguments to the function just pass them. You can pass how many arguments you want to a function, if some values are not defined they will be passed as undefined.

Plunker link

Pass a dynamic listener to ng-change

3 Answers3