How to use ng-change function in directive?

Question

I am trying to make auto-complete, for this I am using tags-input. Directive name is my-directive, Inside controller I am trying to call selectUser function, but it is not working.

In auto-complete, you have to type 4 letters, like: john, then I will show options..

View

  <body ng-app="myApp" ng-controller="appCtrl">
    <my-directive  apipoint="customerApi" modeldisplay="tags.selected"  ng-model="tags.selected" change="selectUser(tags.selected)"></my-directive>
  </body>

Controller

app.controller("appCtrl", function($scope){     
  $scope.tags = {};
  $scope.tags.selected = [];
  $scope.customerApi = ['tags.json'];
  $scope.selectUser = function(foo)  {
    $scope.aux = foo;
    alert();
  };
});

Directive

app.directive("myDirective", ['$http',function($http){
  return {
    restrict: "E",
    template : 'Here Use tag-input: <tags-input ng-model="modeldisplay"'+
     'ng-change="change(modeldisplay)">'+
     '<auto-complete source="loadTags($query)"></auto-complete>'+
     '</tags-input>',
    require: 'ngModel',
    scope : {
      modeldisplay: "=",
      apipoint: "="
    },
    link : function(scope, element, attrs, ctrl){
      scope.loadTags = function(query) {
         return $http.get(scope.apipoint[0]);
      };
      scope.change = function(item){
        ctrl.$setViewValue(item);
      }
    }
  };
}]);

**DEMO/Now Working **

Plunker Demo

One more thing Is my approach I right?, Reason Behind is that, In Angularjs View, I want to use auto-complete directive oneline, I want to make it as generic approach...

In auto-complete, you have to type 4 letters, like: john, then I will show options.. — Guest
– Guest, Commented Jun 2, 2016 at 12:57
you need to call passed function in scope.change function using $scope.$apply(function) - scope.change = function(item){ $scope.$apply(item()) } — Anita
– Anita, Commented Jun 2, 2016 at 13:02
@Anita, Thanks for reply, I didn't get it, could you elaborate more on it.. — Guest
– Guest, Commented Jun 2, 2016 at 13:03
i hve made changes to you plunker added that plunker link in answer. Plz comment if anything is not clear to you. — Anita
– Anita, Commented Jun 2, 2016 at 13:44

Anita · Accepted Answer · 2016-06-02 13:43:19Z

2

Some changes you should do to run the controller function.

Here is the working plunker Plunker

You were using third party directive that doesn't provide ng-change on that. Yes but it provides on-tag-added="change1(modeldisplay). So ng-change was not working.
You have passed function in the change attribute of you my-directive and again there was another change function in your directive scope, that was creating misunderstanding.
You were accessing passed function using scope but you have not mentioned that in directive isolated scope. That's why that passed function was not accessible in directive scope.

answered Jun 2, 2016 at 13:43

Anita

2,4102 gold badges21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Guest Over a year ago

Could you tell, Is my approach I right?, Reason Behind is that, In Angularjs View, I want to use auto-complete directive oneline, I want to make it as generic approach...

Community · Accepted Answer · 2017-05-23 12:31:33Z

2

Do you need something like this?

Plunker Demo

Directive changes:

link: function(scope, element, attrs, ctrl) {
  scope.loadTags = function(query) {
    return $http.get(scope.apipoint[0]);
  };
  scope.updateModel = function(item) {
    ctrl.$setViewValue(item);
  };
},
controller: ['$scope', function($scope) {
  $scope.$watch('modeldisplay', function(newVal) {
    $scope.updateModel(newVal);
  });
}],

Read this if you need more explanation:

How to implement an ng-change for a custom directive

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Jun 2, 2016 at 13:24

Tamas Kinsztler

1811 gold badge3 silver badges14 bronze badges

8 Comments

Tamas Kinsztler Over a year ago

Also read this: mbenford.github.io/ngTagsInput/gettingstarted ngTagsInput does not have any ng-change attribute as I saw, this is why you need scope watch in your directive controller.

Guest Over a year ago

Thanks this is I was looking, Could you tell me why I was not able to call ng-change....

Tamas Kinsztler Over a year ago

As I wrote in the previous comment, ngTagsInput doesn't have any ng-change attribute, so you cannot bind your own function on this attribute, because it not exits. You also missed to bind your change function in directive scope attribute so this was a problem too, because in this case you called an undefined function.

Guest Over a year ago

Is my approach right or not, Reason It that I just want to put on line in my Angularjs View...

Guest Over a year ago

One more, Demo suggested by you, function '$scope.selectUser ' is calling only one time..

|

Collectives™ on Stack Overflow

How to use ng-change function in directive?

2 Answers 2

1 Comment

8 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Linked

Related