0

I am badly stuck with this problem of passing data from one controller to other in angularJS. Before my code was: whenever I click on templateController's div, it would trigger setTemplate with the help of ng-click... Now my objective was to send templateController's selected data to ReplyController...

After reading forum posts here, i decided to create a service called 'selectionService', so that i can transmit data between 2 controllers...

//Defined Service

proApp.service('selectionService', function() {
  var selected_template;

  addTemplate = function(newObj) {
      selected_template = newObj;
  };
  getTemplate = function(){
      return selected_template;
  };
});

//Controller 1... where templates are selected

proApp.controller('TemplateController',function($scope, selectionService)
{
    $scope.templates = [ 
    {template_name:"Template 1", template_text:"We apologize for the interruption."} ,
    {template_name:"Template 2", template_text:"Thank you for contacting us."} ,
    } ,
    ];

    // on ng-click
    $scope.setTemplate = function(tmp)
    {
        selectionService.addTemplate(tmp);   
    }
});


// Controller 2 ... supposed to catch the selected template.

proApp.controller('ReplyController', function($scope, selectionService) 
{
    $scope.template = selectionService.getTemplate();
});

So whenever i run this code, i started getting this error 

Object [object Object] has no method addTemplate...

Again I tweeked the code where they were suggesting to use Squarebrackets and put $scope , servicename and then write function with same parameters.. I don't understand why I should do this? Event after doing some changes like [ '$scope' , 'service' , function($scope, service){}] ,

I am still not able to figure out the solution to pass data from one controller to other using service.

Could you help? What am I missing? I am very new to angularJS way of doing stuff.

Chethan Thimmappa
  • 629
  • 2
  • 7
  • 17

1 Answers1

1

I think it's actually quite simple. You just need to add your methods to the service by using this.. Currently they are declared on window. Change your service declaration to use this...

proApp.service('selectionService', function() {
  var selected_template;

  this.addTemplate = function(newObj) {
      selected_template = newObj;
  };
  this.getTemplate = function(){
      return selected_template;
  };
});

As for using the array notation for dependencies, it's a good practice but it's not required. It'll save you from headaches if you ever run your code through a minifier.

Anthony Chu
  • 37,170
  • 10
  • 81
  • 71
  • Thanks for your reply Anthony. That is how I did, whenever I call selectionService.getTemplate() from the other controller.. it says Object [object Object] has no method getTemplate – Chethan Thimmappa Feb 17 '14 at 05:20
  • Did you add the "`this`" keyword to your 2 function declarations? They're missing in your original code. – Anthony Chu Feb 17 '14 at 05:22
  • Anthony , i had missed that detail, i added this keyword now... Now the error is not appearing.. But still it is not solving my problem.. how to get the value $scope.template = selectionService.getTemplate(); ... when i did console.log() .. the value is undefined ... that means getTemplate() is returning nothing? – Chethan Thimmappa Feb 17 '14 at 05:35
  • 1
    Add a breakpoint inside `setTemplate()` and see what value is being passed in and see if `selected_Template` is being set to it. – Anthony Chu Feb 17 '14 at 05:43
  • How do I refresh the data in ReplyController on every ng-click data which is carried by the service.. it seems like it is triggering only once.. how do i keep it updated... i followed this question for a while http://stackoverflow.com/questions/20181323/passing-data-between-controllers-in-angular-js .. should we use ng-model to update data dynamically... i am currently using just { template } in controller's jade file .. – Chethan Thimmappa Feb 17 '14 at 05:44
  • It looks like they are suggesting you broadcast an event from addTempate() and listen for it in your reply controller. – Anthony Chu Feb 17 '14 at 05:58
  • actually, i was about to ask the same question....the events are being recorded inside addTemplate() ... i just did console.log and was able to see selected template... now i want to know how to propogate this template to replyController... do u know how to broadcast this? i am asking too many questions.. I am sorry... – Chethan Thimmappa Feb 17 '14 at 06:01
  • 1
    Change your service to take in `$rootScope` as a parameter, then in `addTemplate()`, use `$rootScope.$broadcast(...)` to broadcast an event. And in the reply controller, add `$scope.$on(...)` to listen for it and set `$scope.template = selectionService.getTemplate();`. – Anthony Chu Feb 17 '14 at 06:12
  • Wow.. $rootScope and $broadcast stuff now worked! wow finally.. able to get all click events propagated to reply controller :) thanks a lot anthony.. – Chethan Thimmappa Feb 17 '14 at 06:31
  • 1
    It feels like there must be a more elegant way to do this though. But I'm glad to hear it worked out for you. – Anthony Chu Feb 17 '14 at 06:35