Angular passing parameters from one controller to another

Question

Im a newbie in angular, trying to learn the language.

Got the following code: http://plnkr.co/edit/fuVb0mzhmDCKr1xKp7Rn?p=preview

Have a tab:

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $routeProvider.when
        ('/jobs', {templateUrl: 'jobs-partial.html',   controller: JobsCtrl  }).
      when
        ('/invoices', {templateUrl: 'invoices-partial.html',   controller: InvoicesCtrl }).
      when
        ('/payments', {templateUrl: 'payments-partial.html',   controller: PaymentsCtrl }).
      otherwise({redirectTo: '/jobs'});

      // make this demo work in plunker
      $locationProvider.html5Mode(false);
}]);

I would like to be able to access the selected tab from one the panel. How can I send parameters to the tab controllers?

You should use some service/factory: angulartutorial.net/2014/03/… — zucker
– zucker, Commented Oct 1, 2015 at 10:36

Chrillewoodz · Accepted Answer · 2015-10-01 10:38:25Z

2

Create a service that will set a value and return it:

.service('shared', function() {

  var myValue;

  return {
    setValue: function(value) {
      myValue = value;
    },
    getValue: function() {
      return myValue;
    }
  }
});

Then inject it into both your controllers:

.controller('Ctrl1', ['shared', function(shared)......

.controller('Ctrl2', ['shared', function(shared)......

And then set the value from Ctrl1:

shared.setValue('somevalue');

And in Ctrl2 you can just retrieve the value:

var mySharedValue = shared.getValue();

answered Oct 1, 2015 at 10:38

Chrillewoodz

28.5k23 gold badges102 silver badges189 bronze badges

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

Comments

Arkantos · Accepted Answer · 2015-10-01 10:49:15Z

1

You can create a Service or Factory, inject that in to your TabsCtrl, save the currentTab state in that service in ng-click. Inject the same service in your Page controllers like JobsCtrl

app.factory('MyService',function(){

  var currentTab ;

  return {

      setCurrentTab : function(tab){
        currentTab = tab;
      },

      getCurrentTab : function(tab){
        return currentTab;
      }

  };

});

Update your TabsCtrl like below

function TabsCtrl($scope, $location, MyService) {
  // removing other code for brevity
  $scope.selectedTab = $scope.tabs[0];
  // saving the default tab state
  MyService.setCurrentTab($scope.tabs[0]);

  $scope.setSelectedTab = function(tab) {
    $scope.selectedTab = tab;
    // saving currentTab state on every click
    MyService.setCurrentTab(tab);
  }

}

In your JobsCtrl, inject the same MyService and retrieve the cached tab state like below

function JobsCtrl($scope, MyService) {
  var currentTab = MyService.getCurrentTab();
  alert(currentTab.label);
}

Here's an updated Plunker with the above changes.

answered Oct 1, 2015 at 10:49

Arkantos

6,6083 gold badges19 silver badges38 bronze badges

1 Comment

user1203996 Over a year ago

Both Answers are right. I accepted yours as the right answer as you kept it relevant to the scenario "tabs" and you even went a step further an edited the Plunker. *Thumbs Up!

Collectives™ on Stack Overflow

Angular passing parameters from one controller to another

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related