How to Pass parameter from AngularJS Directive to AngularJS controller function

Question

Thanks in advance,Actually I want to call a function in controller from app.Directive, Please anyone let me know How I can call?Also I passing parameter to that function?I'm new in angular and here is all code.

var app = angular.module('quizApp', []);
app.controller("SaveCtrl", function (scope) {
$scope.Save = function (score) {
    $scope.TestDetailsViewModel = {};
    $scope.TestDetailsViewModel.CorrectAnswer = $scope.score;
    $http({
        method: "post",
        url: "/Home/ResultSave",
        datatype: "json",
        data: JSON.stringify($scope.TestDetailsViewModel)
    }).then(function (response) {
        alert(response.data);
    })
       };})

  app.directive('quiz', function (quizFactory) {
   return {
    restrict: 'AE',
    scope: {},     
    templateUrl: '/Home/Dashboard',
   link: function (scope, elem, attrs) {
  scope.getQuestion = function () {
            var q = quizFactory.getQuestion(scope.id);
            if (q) {
                scope.question = q.question;
                scope.options = q.options;
                scope.answer = q.answer;
                scope.answerMode = true;
            } else {
                scope.quizOver = true;
              //Calling function save(); in Controller
                //scope.Save(scope.score);
            }
        };
 }
}});

@LuizCarlos Thank you sir, I got the solution which is mention below. — shahbaz hussain
– shahbaz hussain, Commented Jun 21, 2018 at 21:34

georgeawg · Accepted Answer · 2018-06-22 00:59:55Z

3

In the case of an isolated scope, the directive scope is completely unaware of its parent’s scope.

To call a function of a controller you have to bind that function to the scope of directive and then call scope functions from inside the directive.

For example:

app.controller('MainCtrl', function($scope) {

  $scope.commonFunc = function(passed){
    $scope.name = passed;
  };
});

app.directive('demodirective', function(){

  return {
    scope: {
      commonFunc: '&'
     },
    link: function(scope){
      scope.commonFunc({passed:"world"});
    }
  };

});

HTML

<body ng-controller="MainCtrl">
    <demodirective common-func="commonFunc(passed)">
    </demodirective>
    Hello {{name}}
</body>

For Reference - https://plnkr.co/edit/fMIsQ87jgdx49QSnWq4o?p=preview

edited Jun 22, 2018 at 0:59

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered Jun 21, 2018 at 19:51

amrender singh

8,2594 gold badges27 silver badges30 bronze badges

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

3 Comments

shahbaz hussain Over a year ago

Thank you very much, I got this solution,Really I was stuck from two days on this issue.It perfectly working for me.

georgeawg Over a year ago

For more information on expression binding with &, see AngularJS Comprehensive API Reference - scope.

shahbaz hussain Over a year ago

@amrendersingh I did it, Thanks

Collectives™ on Stack Overflow

How to Pass parameter from AngularJS Directive to AngularJS controller function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related