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()?

Santhosh V · Accepted Answer · 2018-08-30 13:04:18Z

1

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>

answered Aug 30, 2018 at 13:04

Santhosh V

4502 silver badges11 bronze badges

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

Comments

Santhosh V · Accepted Answer · 2018-08-28 14:03:02Z

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, 2018 at 14:03

Santhosh V

4502 silver badges11 bronze badges

6 Comments

ahsan ayub Over a year ago

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.

Santhosh V Over a year ago

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 :-)

ahsan ayub Over a year ago

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

Santhosh V Over a year ago

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

ahsan ayub Over a year ago

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

|

Collectives™ on Stack Overflow

Calling function of controller from directive when using isolated scope?

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related