How to call a controller function inside AngularJS directive

Question

Controller in page :

(function () {
 'use strict';
  angular.module('LVS').controller('LVSCtrl', LVSCtrl);
  function LVSCtrl($scope) {
   $scope.OnChange = function() {
   // do
   }
  }
 })();

This is my directive code My Directive code :

(function () {
  'use strict';

  angular.module('LVS')
      .directive('taEmp', taEmp);

  function taEmp() {
      return {
        restrict: 'E',
        scope: {
            ngModel: '=',
            ngDisabled: '=',
            ngReadonly: '=',
            ngChange: '&',
        },
        templateUrl: 'app/pages/ESS-TA/Common/Directives/TAEmpPicker.html',

    }

    })();

My Directive in page :

<ta-emp ng-model="empCode" ng-change="OnChange()"></ta-emp>

My directive not call function in controller

My directive not call function in controller ... just a guess, but this might be because you don't have any code for your directive. — Tim Biegeleisen
– Tim Biegeleisen, Commented Mar 5, 2017 at 16:03

lin · Accepted Answer · 2017-03-05 18:24:07Z

1

I made it work by using $watch inside your directive and parsing an controller function as param into it. The function gonna be executed once the input value has changed.

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
    $scope.name = '';
    $scope.someFunction = function (data) {
       console.log(data);
    };
});

myApp.directive('myDirective', function () {

  return {
      restrict: 'E',
      scope: {
        model: '=ngModel',
        function: '='
      },
      template: '<input type="text" ng-model="model" function="function" my-directive>',
      link: function (scope, element, attrs) {
         scope.$watch('model', function (newValue, oldValue) {
           if (newValue && newValue !== oldValue) {
             if (typeof scope.function === 'function') {
               scope.function('test');
             }
           }
         }, true);
      }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <my-directive ng-model="name" function="someFunction"></my-directive>
</div>

edited Mar 5, 2017 at 18:24

answered Mar 5, 2017 at 16:19

lin

18.5k4 gold badges66 silver badges88 bronze badges

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

7 Comments

lin Over a year ago

@AthitUpakan glad to help ya!

Athit Upakan Over a year ago

why scope.function(); in directive can call function with parameter too? ex. $scope.OnChange = function(data) { //.... });

lin Over a year ago

@AthitUpakan yep this is possible.

Athit Upakan Over a year ago

I'm newbie, do you have document or link for this solution? thanks again.

georgeawg Over a year ago

Be aware that using ng-model for an attribute name will instantiate the ngModelController and attach it to the element. Since the directive does not properly use the ngmodelController API, the ng-change directive will not work. Use of the ng- prefix is reserved for AngularJS core directives. Please avoid using it in custom directives.

|

Collectives™ on Stack Overflow

How to call a controller function inside AngularJS directive

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related