CODEWITHSUNDEEP
javascriptangularjsdata-bindingangularjs-directiveangularjs-scope
Vishwajeet Vatharkar
Vishwajeet Vatharkar

Reputation: 1206

How to fix unexpected arguments passing from a function being on ng-change for select list?

http://plnkr.co/edit/fFSoLmPFDBfNc2oOczZr?p=preview

Directive code

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

Controller code 

  $scope.someFunction = function(name) {
            console.log(name)
          };
  $scope.colors = [{
        name: 'black',
        shade: 'dark'
      }, {
        name: 'white',
        shade: 'light',
        notAnOption: true
      }, {
        name: 'red',
        shade: 'dark'
      }];

Template code

<select ng-model="ngModel" ng-change="ngChange()" 
  ng-options="option.name for option in options">
</select>

Code for directive usage

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

So, the arguments being passed to someFunction() is being undefined or it contains correct value, the behaviour is unexpected and random.

Upvotes: 3

Views: 322

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

Your template should call a method by passing a parameter in JSON format like ng-change="ngChange({someModel: ngModel})" from directive

Make sure while calling function from directive you should pass parameter with the key should be function parameter name as here it is someModel and then pass the value like here its ngModel

Markup

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

Directive template

<select ng-model="ngModel" ng-change="ngChange({someModel: ngModel})" 
  ng-options="option.name for option in options">
</select>

Working Plunkr

Upvotes: 2

Related Questions