How to Forward $scope from Controller to Controller AngularJS? - angularjs

Question

I am New to Angular Js.
Is It Possible to Forward Scope of the RestaurantController to MenuController Code as Follows
Example :-
angular.module('restaurants').controller('RestaurantController', ['$scope',
function($scope) {
$scope.restaurantid="435scvcxvbrcvbnvn";
}
]);
And i assigned restaurant id as New scope in Menu Controller as Follows
angular.module('menus').controller('MenuController', ['$scope',
function($scope) {
$scope.currentrestaurantid= $scope.restaurantid;
alert($scope.currentrestaurantid); // showing Null
}
]);
The Restaurant Id is not Persisted .. Honestly i feel that some thing is Missing .
How to Get the Id From Restaurant controller to Menu Controller ?

Answer 1

Try inheritance
angular.module('restaurants', []);
angular.module('menus', ['restaurants']);
angular.module('restaurants').controller('RestaurantController', function($scope) {
$scope.restaurantid="435scvcxvbrcvbnvn";
});
angular.module('menus').controller('MenuController', ['$scope','$controller',
function($scope, $controller) {
$controller('RestaurantController', {$scope: $scope});
$scope.currentrestaurantid= $scope.restaurantid;
}
]);
Working fiddle

Answer 2

I propose use the rootScope to do that.
Use the $broadcast to notify the other controller the change on the firsts controller scope.
$rootScope.$broadcast("restIDUpdated", {
restaurant: $scope.restaurantid
});
Use the $on to receive the notification in the second controller about the event that happend in the first controller.
$scope.$on("restIDUpdated", function (event, args) {
$scope.restaurant = args.restaurant;
});
There is an example of this here
Try something like this.
angular.module('restaurants').controller('RestaurantController', function($scope) {
$rootScope.$broadcast("restIDUpdated", {
restaurantid: 435scvcxvbrcvbnvn
});
});
angular.module('menus').controller('MenuController', ['$scope','$controller',
function($scope, $controller) {
$controller('RestaurantController', {$scope: $scope});
$scope.$on("restIDUpdated", function (event, args) {
$scope.currentrestaurantid= args.restaurantid;
});
}
]);
But to be honest I am not sure if this mechanism works with two different angular apps, I know using the same module it works but not sure what is going to happen using two different modules, but take a look at the API

Answer 3

A pattern I commonly use is to create an angular service and inject it into controllers I want to share data with. something like this...
angular.module('restaurants', []);
angular.module('menus', ['restaurants']);
angular.module('restaurants').service('RestaurantService', function() {
this.restaurantid = "435scvcxvbrcvbnvn";
});
angular.module('restaurants').controller('RestaurantController', function($scope, RestaurantService) {
$scope.restaurantid = RestaurantService.restaurantid;
});
angular.module('menus').controller('MenuController', function($scope, $controller, RestaurantService) {
$scope.currentrestaurantid = RestaurantService.restaurantid;
});

Answer 4

As said here, injectable service as generic way for your situation.
But I'd like to point more pretty way, using markup and controller as (docs) expression.
For example you have following controller:
.controller('RestaurantController', function($scope) {
$scope.restaurantid="435scvcxvbrcvbnvn";
})
and you can bind it to variable in the scope:
<div ng-controller="RestaurantController as restaurant">
<div ng-controller="MenuControllerOrAnyOther">
restaurant id = {{restaurant.restaurantid}}
</div>
</div>
Remarks
This approach would be nicer if you need restaurantid ONLY in markup, e.g.
<button ng-click="select(restaurant.restaurantid)">
This looks ugly, if you want to use restaurantid in js code (you should use injectable services then):
var restaurantid = $scope.$eval('restaurant.restaurantid');