CODEWITHSUNDEEP
javascriptangularjs
Guest
Guest

Reputation: 515

How to use ng-change function in directive?

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

Upvotes: 0

Views: 1534

Answers (2)

Anita
Anita

Reputation: 2400

Some changes you should do to run the controller function.

Here is the working plunker Plunker

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

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

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

Upvotes: 2

Tamas Kinsztler
Tamas Kinsztler

Reputation: 181

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

Upvotes: 2

Related Questions