Calling function of controller from directive when using isolated scope?

Question

I want to call a function of Controller from Directive, It is for validation. But i'm a bit confused about how to call it from Directive when i'm using isolated scope. Here is the code of directive:-

App.directive('test',function(){
    return{
    require: "ngModel",
     scope:{
         a:"=",
         b:"=",
         c:'=',
         d:'='
            },
         link: function(scope, element, attributes,modelVal )
            {
            modelVal.$validators.test= function(val)
              {
                return false;
               //isolated scope values will make if condition true or false.
               if(scope.a=="true"){
                //I need to call a function of controller here. But how can 
                //i call that function from directive? this is my problem
                         } 
               }
             scope.$watch("a", function()
               {
                    modelVal.$validate();
                });

         }//end of link function;
      }//end of return;
});//end of directive;

Function is in my controller, i think i don't need to write the controller code. In my html , I'm calling this directive as:

     <test a="1" b="2" c="3" d="4" ng-model="abc"></test>

What changes i need to do in my directive to call the controller function which is $scope.testFunction()?

score 1 · Accepted Answer · answered Aug 30 '18 at 13:04

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

module.controller('TestController', function($scope){
  $scope.text = 'test';
  
  // Will be invoked from 'test' directive
  $scope.alertMe = function(text){
    alert(text);
  };
});

module.directive('test', function(){
  return {
    restrict: 'E',
    template: '<input ng-model="text" ng-change="onChange(text)" />',
    scope: {
      text: '='
    },
    link: function(scope, elem, attr){
      scope.onChange = function(text){
      
      // Invoking parent controller function
       scope.$parent.alertMe(text);
      }
    }
  }
})

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myModule" ng-controller="TestController">
 
<test text="text"></test>

</div>
</body>
</html>

score 0 · Answer 2 · answered Aug 28 '18 at 14:03

0

I have given a sample, try like this.

Controller:

module.controller('TestController', function($scope){
  $scope.onTextChange = function(text){
    alert(text);
  };
})

HTML:

<test my-func="onTextChange(text)"></test>

Directive:

module.directive('test', function(){
  return {
    restrict: 'E',
    template: '<input ng-model="text" ng-change="onChange(text)" />',
    scope: {
      myFunc: '&'
    },
    link: function(scope, elem, attr){
      scope.onChange = function(text){
        if(typeof scope.myFunc === 'function'){
          // Calling the parent controller function
          scope.myFunc({text: text});
        }
      }
    }
  }
})

answered Aug 28 '18 at 14:03

Santhosh V

380
1
11

I have already this solution, this is not what i want, i want to use isolated and crtl scope in a single directive, you can call it mix scope. – ahsan ayub Aug 29 '18 at 05:21
I believe, based on the need you can go with either one of **Isolated scope** or **Controller scope**. I am really wondering that what you mean by **'mix scope'**. Could you elaborate the use case of this? Also you specified in your question that Isolated scope is being used in your directive :-) – Santhosh V Aug 30 '18 at 09:37
Can you take a look on my code? I have told in directive using `comments`, that I'm using `isolated scope`, but i need to call a function from controller in that directive.and i'm not including any `template`.Just tell me , how can i call that function in controller keeping in mind that i'm not using any `event listener` like `ng-click` or `ng-change`. `isolate scope` will decide that i should call that function or not. Think of it as an if case ie if condition is isolated scope values and if true then call a function from controller. Thanks @santhoshV – ahsan ayub Aug 30 '18 at 12:43
@ashan ayub We have an option `bindToController: true` to point the scope to parent controller. But you can't use both `scope:{a: "="}` and `bindToController: true` at the same time. There is one hack you can try `scope.$parent.testFunction()` from your directive. – Santhosh V Aug 30 '18 at 12:58
1

Thanks for explanation. Can you explain this hack by creating a small example and post it as answer? It will be very helpful and also when creating it keep my code in mind too. Thanks – ahsan ayub Aug 30 '18 at 13:00
@ashan ayub Just added a new answer as you suggested. Thanks :) – Santhosh V Aug 30 '18 at 13:05

Calling function of controller from directive when using isolated scope?

2 Answers2