Sharing a variable between controllers in angular.js

Question

I'm new to angular and I'm wondering how I can share a variable between controllers in angular. I'm using the following scripts -

In Main.js:

function MainCntl($scope) {
  ---code
}

function SearchCtrl($scope, $http) {
    $scope.url = 'http://10.0.0.13:9000/processAdHoc';
    $scope.errorM = "No results";     
    $scope.search = function() {

        $http.post($scope.url, { "data" : $scope.keywords}).
        success(function(data, status) {
            $scope.status = status;
            $scope.data = data;
            $scope.result = data; 
            alert('yes');
        })
        .
        error(function(data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;   
            alert('no');
            $scope.result = "failed";
        });
    };
}

In Index.html

<body ng-controller="MainCntl" >
---code
<div ng-controller="SearchCtrl">
     <form class="well form-search">
     <div class="ui-widget">
          <label for="tags"></label>
          <a ng-click="search()"><input type="image" src="../../images/search1.png" class="searchbox_submit" /></a>
          <input ng-model="keywords" placeholder="Shadow Search" id="tags" class="input-medium search-query rounded" /> 
     </div>
     </form>
</div>
---code
<p ng-model="result">
     {{result}}
</p>
</body>

Everything works well with the ajax I'm sending data and receiving a response, my question is as follows:

In the SearchCtrl function I have a variable called $scope.result that is later referred to in Index.html. If I insert the html code that contains that variable into the SearchCtrl controller it works fine but if it is in the MainCtrl controller it does not work. How can I share this variable between the controllers.

Thanks ahead

hitautodestruct · Accepted Answer · 2013-11-11 08:54:52Z

70

Use a service and inject it to both controllers and refer your scope vars to the services variable.

Example:

angular.module("yourAppName", []).factory("myService", function(){

  return {sharedObject: {data: null } }

});

function MainCtrl($scope, myService) {
  $scope.myVar = myService.sharedObject;
}

function SearchCtrl($scope, $http, myService) {
  $scope.myVar = myService.sharedObject;
}

In your template do:

{{myVar.data}}

See an example Uses Angular v1.1.5

The reason you put it in an inner object is to preserve your references, if you keep it without a "sharedObject", and change that object, your binding will be pointing to the old reference and wouldn't show anything in the template.

edited Nov 11, 2013 at 8:54

hitautodestruct

21.1k15 gold badges76 silver badges96 bronze badges

answered May 12, 2013 at 15:02

Shai Reznik - HiRez.io

9,0082 gold badges37 silver badges34 bronze badges

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

8 Comments

Gidon Over a year ago

Hi ShaiRez, thanks for the quick answer and the example, but sadly it's still not working... maybe I am not implementing it correctly. I added everything you provided in the example and also changed the template to {{myVar.data}}. Two questions arise, shouldn't I change the templates view also, and also add myVar to the success/error functions of the ajax call? Thanks again, Gidon

Gidon Over a year ago

After reading a bit more I found an easier way to do this with $rootScope... Thanks anyway for your time and kudos on the angular meetups, i'll try to make the next one :)

turbo2oh Over a year ago

@ShaiRez is the preferred model for handling authentication? authenticate in a service (if not logged in already) and return a user model to all controllers that need it?

Shai Reznik - HiRez.io Over a year ago

It's a different question and if I understand correctly than yes, use a login service or user service to hold communication or properties of that kind

hitautodestruct Over a year ago

@Gidon I edited the answer see the added example on jsbin. Also, there was an error in ShaiRez's code.

|

Collectives™ on Stack Overflow

Sharing a variable between controllers in angular.js

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related