Shared Variables between Controllers with a Service in AngularJS

Question

I'm trying to share a group of variables between my controllers, but it does not seem to be working, I already followed some example but can't make it to work.

Below is the JavaScript

angular.module('PickMeUp.controllers', []).
service('sharedProperties', function() {
  // Car Variables
  var make;
  var model;
  var color;

  // Bldg Variables
  var building = 'b';
      var door = 'd';

  return {
      getCar: function () {
          return make + " " + model + " " + color;
      },
      getBldg: function () {
          return building;
      },
      getDoor: function () {
          return door;
      },
      setCar: function (make1, model1, car1) {
          make = make1;
          model = model1;
          car = car1;
      },
      setBldg: function (building1, door1) {
          building = building1;
          door = door1;
          //****When this is called, displays the new values****
          alert("Bldg " + building);
          alert("Door " + door);
      }
  };
  }  
  })
.controller('MyCtrl2', ['$scope', 'sharedProperties', function ($scope, sharedProperties) {
      $scope.sharedProperties = sharedProperties
      console.log("ctrl2");
      $scope.passenger = 'esau';

      $scope.building = sharedProperties.getBldg();
      $scope.door = sharedProperties.getDoor();

      //****This is giving me the default values****
      console.log($scope.building);
      console.log($scope.door);

      //****This is undefined****
      alert("Bldg " + sharedProperties.building);
      alert("Door " + sharedProperties.door);
  } ])
.controller('BuildingChgCtrl', ['$scope', 'sharedProperties', function ($scope, sharedProperties) {
  $scope.sharedProperties = sharedProperties;
  $scope.buildings = ['DGTC', 'Walmart Home Office', 'Sam\'s Home Office'];
  $scope.exits = ['East', 'West', 'Vendor'];
  $scope.building;
  $scope.door;
  $scope.exitDisplay = 'none';
  $scope.change = function () {
      $scope.exitDisplay = 'inline';
      console.log("changed display");
  };
  console.log("controller called ");

  //$scope.building = sharedProperties.getBldg();
  //$scope.door = sharedProperties.getDoor();

  console.log($scope.building);
  console.log($scope.door);

//      $scope.setBldg = function(b,d) {
//          alert("Bldg " + sharedProperties.building);
//          alert("Door " + sharedProperties.door);
//          
//          sharedProperties.building = b;
//          sharedProperties.door = d;
//          //****When this is called, displays the new values****
//          alert("Bldg " + sharedProperties.building);
//          alert("Door " + sharedProperties.door);
//      }

  } ]);

And below the HTML

building.html

<form action="{{nextURL}}">
<div ng-controller="BuildingChgCtrl">
    <select ng-change="change()" ng-model="$parent.building" ng-options="b for b in buildings">
        <option value="" style="display:none;">Choose building</option>
    </select>
    <br />

    <select style="display:{{exitDisplay}};" ng-model="$parent.door" ng-options="e for e in exits">
        <option value="" style="display:none;">Choose Exit</option>
    </select>
    <br />
    bldg1 = {{building}}, door1 = {{door}} <br />
    <button ng-click="sharedProperties.setBldg(building,door)">Next</button>
    <a href="{{nextURL}}">Next</a>
</div>
<br />
bldg2 = {{building}}, door2 =  {{door}}
</form>

passenger.html

<div><a href="#/driverSubmitOffer">Passenger 1</a></div>

{{passenger}} <br />

building = {{sharedProperties.building}}<br />
door = {{sharedProperties.door}}</div>

index.html at least the important code on this page

...
<div ng-view>
</div>
....

app.js at least the important code

$routeProvider.when('/building', {templateUrl: 'partials/Building.html', controller: 'DriverBuildingCtrl'});
$routeProvider.when('/passengerQueue', {templateUrl: 'partials/Passenger.html', controller: 'MyCtrl2'});

This is how is supposed to work. In building.html I am setting the building (a drop down) when I click on Next button, and I want to display it in passenger.html

Thanks

Anton · Accepted Answer · 2013-09-08 23:39:14Z

1

<button ng-click="setBldg(building,door)">Next</button> is probably throwing an error ( check your browser debug console and let me know if it is the case)

ng-click is trying to call BuildingChgCtrl.setBldg, which doesnt exist in the code you have shown.

if you add the following to your BuildingChgCtrl

$scope.sharedProperties = sharedProperties

and change the ng-click to

<button ng-click="sharedProperties.setBldg(building,door)">Next</button>

that should be a step in the right direction.

Further to that, you will be able to reduce the code if you also add $scope.sharedProperties = sharedProperties to MyCtrl2 and bind with {{sharedProperties.door}}

answered Sep 8, 2013 at 23:39

Anton

7,7095 gold badges33 silver badges33 bronze badges

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

2 Comments

esausilva Over a year ago

Building and car variables are still not showing up in passenger.html after making these changes. Somehow when changing from building.html to passenger.html the variables are not saving

esausilva Over a year ago

I updated my code here, I don't know if I can make a fiddle with multiple html pages

Collectives™ on Stack Overflow

Shared Variables between Controllers with a Service in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related