1

I'd like some advice on how to share some data between two or more controllers in AngularJS.

For now I'm just dealing with two controllers, but in the future I will have more controllers that will also want to use this same data. Right now I have a navigation-controller which is controlling the side navigation and the header. And for ease of understanding, let's say the second controller is called content-controller which is responsible for dealing with all the content.

I want to dynamically load the content based on whatever the user searches for and the search bar is in the side navigation, so this searchTerm needs to be accessible by both controllers. In the future, I would also implement some other features which would probably need to access this searchTerm as well.

In terms of the HTML structure, the content-controller is inside the navigation-controller.

My first thought was to make searchTerm globally available by sticking it in $rootScope, but I'm unsure if this is an efficient/secure way to do it.

My second thought was to take the searching aspects and put them into a service. Inside this service I would put functions which would speak to the API in order to get the necessary data. This would mean on the search bar, I can make the submit search button access the service and run something like FooService.update(searchTerm).

What do you think the best way to deal with this scenario is?

germainelol
  • 3,231
  • 15
  • 46
  • 82
  • Service is certainly better – Icycool Jun 29 '15 at 10:16
  • If using a Service, I would put a function in the `nav-controller` which gets the search results, but where should I put these results? Only the `content-controller` needs to access these results so that it can display the data. The navigation just needs to run a search, so essentially I want to use it to run the search and pass the data to the other controller to deal with how to display it and what not. How would you go about that? – germainelol Jun 29 '15 at 10:19

2 Answers2

6

Sharing data between controllers has always been a prominent requirement. You have a couple of options out there :

  1. Factory
  2. Services

You can refer to this answer, for more details upon the differences.

Using services is definitely the better option, since you won't be polluting the root scope with extra variables [That are destined to grow in numbers as your have already mentioned].

A possible way to store your data in services, and access them in controllers and HTML effortlessly can be described as :

  1. Create a service, that will hold all the model variables.

    angular.service("dataService", function() {

    this.value1 = "";
    this.value2 = "";
});

  2. reference that service in your controllers, saving their reference in the scope.

    angular.controller("myCntrl1", function($scope, dataService) {
    $scope.dataService = dataService;
});


angular.controller("myCntrl2", function($scope, dataService) {
    $scope.dataService = dataService;
});

  3. Now in your html, you refer all your modal variables using the service reference : 

        // Controller 1 view
    <div ng-controller="myCntrl1">
        <input type="text" ng-model="dataService.value1" />
    </div>

    // Controller 2 view
    <div ng-controller="myCntrl2">
        The value entered by user is {{dataService.value1}}
    </div>
Community
  • 1
  • 1
Manish Kr. Shukla
  • 4,447
  • 1
  • 20
  • 35
  • Thanks for the answer. So, in this specific example, I would be using the `nav-controller` to access some sort of "update" or "get" function in the Service which just updates the data. In the Service itself, I would deal with updating the data. So, in my `content-controller` I can create another instance of the Service, and listen to the Service for any changes to the data. For example, I could do something like `$scope.user = dataService.username` for example and it would update when the search is ran. Is this correct? – germainelol Jun 29 '15 at 10:26
  • I would suggest to use service variables directly in the controller and the view. Why bother to create a new variable, when you can use the service directly ?? Bind your service to a scope variable to in the controller, and then use this variable to access everything in that service. – Manish Kr. Shukla Jun 29 '15 at 10:28
  • True, thanks for your help. I'll mark it as the answer. – germainelol Jun 29 '15 at 10:29
0

First of all i don't know whether it's gonna work for you.

You can use local storage.

By using this the same data can be accessed in any controller

Here's an example how it worked for me.

app.controller("loginCtrl", function($scope, $window){
$scope.submit = function(){
    $window.localStorage.setItem = ("username", $scope.username);
    };
 });

app.controller("homeCtrl", function($scope, $window){
$scope.logout = function(){
    $window.localStorage.getItem = ("username");
    };
 });
Ravisankar R
  • 37
  • 7