Angularjs pass function from Controller to Directive (or call controller function from directive) - with parameters

amitthk

My question is very simple, I just want to pass a controller function to directive. In other terms, I just want to call a controller function from directive.

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

myapp.controller('myCtrl',['$scope','$timeout',function($scope,$timeout){
  
  $scope.fnItemsOnAdded = function(itms){
     alert('Hi, I am in controller add. Here are your Items: '+JSON.stringify(itms));
    }
    $scope.fnItemsOnCancel = function(itms){
     alert('Hi, I am in controller cancel. Here are your Items: '+JSON.stringify(itms));
    }
  
  }]);

myapp.directive('myPicker',['$timeout',function($timeout){
  
  
  var dtv={};
  
  dtv.template = '<li ng-repeat="itm in ngModel.ItemsList"><label><input type="checkbox" ng-model="itm.IsSelected" />{{itm.Name}}</label></li>';    
  dtv.template += '<a href="javascript:void(0)" ng-click="addItems()" class="addItems">add items</a>';
  dtv.template += '<a href="javascript:void(0)" ng-click="cancelItems()" class="cancel">cancel</a>';
  
  dtv.scope =  { postUrl: '@', jsonadd: '&', jsoncancel: '&' };
  
  dtv.restrict = 'A';
  
dtv.link = function($scope,elm,attrs){
  
  $scope.ngModel={};
  $scope.ngModel.SelectedKeys=[];
  
  $timeout(function(){
    $scope.ngModel.ItemsList = [
    {Name:"Item1",IsSelected:false},
      {Name:"Item2",IsSelected:false},
      {Name:"Item3",IsSelected:false},
      {Name:"Item4",IsSelected:true},
      {Name:"Item4",IsSelected:false},
    ];
    
    },100);
  
    $scope.addItems = function(){
      
      //Dummy logic to update SelectedKeys
      for(var idx =0;idx<$scope.ngModel.ItemsList.length;idx++){
      if($scope.ngModel.ItemsList[idx].IsSelected){
      $scope.ngModel.SelectedKeys.push($scope.ngModel.ItemsList[idx]);
      }
      }
      
    alert("i'm in directive add. Lemme call parent controller");
    $scope.jsonadd($scope.ngModel.SelectedKeys);
    }
  
    $scope.cancelItems = function(){
    alert("i'm in directive cancel. Lemme call parent controller");
    $scope.jsonadd($scope.ngModel.SelectedKeys);
    }
    
  }
  
  
  return(dtv);
  
  
  }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myapp" ng-controller="myCtrl">

<div class="jqmWindow" id="myPickListDiv" my-picker  jsonadd="fnItemsOnAdded" jsoncancel="fnItemsOnCancel" post-url="/myurl"></div>
  
  </div>

  • I have tried this approach but it doesn't trigger the function, doesn't throw any error either.
  • I tried this and this approach - it returns an error $apply is already in progress.

Can anybody please help me where I'm going wrong here. I believe it has got something to do with $scope inheritance or convention.

I know I am doing some petty mistake here, just that I am can't figure it in the rush I am.

Thank you very much for you help!

Phil

You're almost there. The syntax for passing params is a little strange.

In your HTML, use something like

<div my-picker jsonadd="fnItemsOnAdded(items)"...

and in your directive...

$scope.jsonadd({items: $scope.ngModel.SelectedKeys})

The keys in the object passed to the isolate scope function (jsonadd, jsoncancel) need to match the argument names used in the attribute.

I don't know where SelectedKeys comes from but I assume you've just omitted something for brevity.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

AngularJS How to call directive function from controller

From Dev

AngularJS Controller - Directive -> invokation of Controller function from directive

From Dev

How to call angular controller scope function from directive with parameters?

From Dev

How to call angular controller scope function from directive with parameters?

From Dev

angularjs directive will not call controller function

From Dev

Angularjs directive call controller function

From Dev

Angularjs directive call controller function

From Dev

How to pass a function handler from controller into directive isolated scope in AngularJs?

From Dev

AngularJS Pass value from directive link function to controller

From Dev

How to pass a function handler from controller into directive isolated scope in AngularJs?

From Dev

How to pass a value from an AngularJS directive to a function in parent controller

From Java

Call a controller function from a directive without isolated scope in AngularJS

From Dev

Pass Arguments from directive to controller function

From Dev

pass function from parent controller to directive with parameter

From Dev

Call Angular controller function from directive

From Dev

Call controller function from angular directive

From Dev

Call controller function from directive with arguments

From Dev

Call function in controller from a nested directive

From Dev

How to call a directive function from controller?

From Dev

Call controller function from directive with arguments

From Dev

Call Controller Function from Directive (with params passed from directive)

From Dev

Call Controller Function from Directive (with params passed from directive)

From Dev

AngularJS: Exeucting function from controller in a directive

From Dev

AngularJS: Exeucting function from controller in a directive

From Dev

Calling directive function from controller angularjs

From Dev

how to call one directive controller function from another one directive using angularjs

From Dev

How to pass data from controller to directive from ajax call AngularJS

From Dev

Angular: Call directive controller function from separate controller

From Dev

angular calling controller function in from directive controller

Related Related

  1. 1

    AngularJS How to call directive function from controller

  2. 2

    AngularJS Controller - Directive -> invokation of Controller function from directive

  3. 3

    How to call angular controller scope function from directive with parameters?

  4. 4

    How to call angular controller scope function from directive with parameters?

  5. 5

    angularjs directive will not call controller function

  6. 6

    Angularjs directive call controller function

  7. 7

    Angularjs directive call controller function

  8. 8

    How to pass a function handler from controller into directive isolated scope in AngularJs?

  9. 9

    AngularJS Pass value from directive link function to controller

  10. 10

    How to pass a function handler from controller into directive isolated scope in AngularJs?

  11. 11

    How to pass a value from an AngularJS directive to a function in parent controller

  12. 12

    Call a controller function from a directive without isolated scope in AngularJS

  13. 13

    Pass Arguments from directive to controller function

  14. 14

    pass function from parent controller to directive with parameter

  15. 15

    Call Angular controller function from directive

  16. 16

    Call controller function from angular directive

  17. 17

    Call controller function from directive with arguments

  18. 18

    Call function in controller from a nested directive

  19. 19

    How to call a directive function from controller?

  20. 20

    Call controller function from directive with arguments

  21. 21

    Call Controller Function from Directive (with params passed from directive)

  22. 22

    Call Controller Function from Directive (with params passed from directive)

  23. 23

    AngularJS: Exeucting function from controller in a directive

  24. 24

    AngularJS: Exeucting function from controller in a directive

  25. 25

    Calling directive function from controller angularjs

  26. 26

    how to call one directive controller function from another one directive using angularjs

  27. 27

    How to pass data from controller to directive from ajax call AngularJS

  28. 28

    Angular: Call directive controller function from separate controller

  29. 29

    angular calling controller function in from directive controller

HotTag

Archive