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, Jun 02 '16 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, Jun 02 '16 at 13:02
@Anita, Thanks for reply, I didn't get it, could you elaborate more on it.. — Guest, Jun 02 '16 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, Jun 02 '16 at 13:44

score 2 · Answer 1 · edited May 23 '17 at 12:31

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 '17 at 12:31

Community

1
1

answered Jun 02 '16 at 13:24

Tamas Kinsztler

182
1
2
14

Also read this: http://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. – Tamas Kinsztler Jun 02 '16 at 13:26
Thanks this is I was looking, Could you tell me why I was not able to call ng-change.... – Guest Jun 02 '16 at 13:31
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. – Tamas Kinsztler Jun 02 '16 at 13:38
Is my approach right or not, Reason It that I just want to put on line in my Angularjs View... – Guest Jun 02 '16 at 13:44
One more, Demo suggested by you, function '$scope.selectUser ' is calling only one time.. – Guest Jun 02 '16 at 13:48
Yeah you are right, something is wrong, sorry. Check @Anita's answer, she found out that ngTagsInput has `on-tag-added` attribute, which looks like to be a better solution. Anyway save my second link, because it's really helpful if you make custom directives and you need ng-change for it. – Tamas Kinsztler Jun 02 '16 at 14:06
Thanks , could you tell me, is my approach is right or not. Reason Behind is that, In Angularjs View, I want to use auto-complete directive oneline, I want to make it as generic approach. – Guest Jun 02 '16 at 14:10
Yes, I think wrapping third-party directive into a custom directive is a good approach if you use this directive more times in your application in the same way and you want to shorten your code. – Tamas Kinsztler Jun 02 '16 at 14:17

score 2 · Accepted Answer · answered Jun 02 '16 at 13:43

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.

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... — Guest, Jun 02 '16 at 14:08

How to use ng-change function in directive?

2 Answers2