I have some parameters in the $rootScope
as specified below:
myApp.factory('itemService', function($http) {
return $http.get('/items');
});
myApp.run(function($rootScope, itemService) {
itemService.success(function(response) {
$rootScope.items = response;
});
});
myApp.controller('displayCtrl', function($rootScope, $scope) {
$scope.items = $rootScope.items;
});
When I run the above code, I get this error from firebug
TypeError: $rootScope.items is undefined
. I really do not know what is happening.
Here is a small addition. items
is an array with a list of objects like this:
items = [
{'name': 'spoon', 'price': 200},
{'name': 'table', 'price': 400},
{'name': 'shoe', 'price': 250}
];
I wish to make items
available constantly in my app such that I can display each item on the item list (items) without making another request to the server. I intend to achieve this by simply displaying an item using $scope.item = items[$routeParams.id]
each time I need to display an item.
I look forward to implement this using either a function attached to ng-click
or the normal #/route/:param
mechanism.
Thanks
Finally, I was able to come up with a solution. I realized that the problem was to have $rootScope.items
available in displayCtrl
at the same time it loads. But $rootScope.items
is available in my view when my html page loads.
So I simply passed the item id as a parameter and obtained it using $routeParams
as follows
myApp.controller('displayCtrl', function($routeParams, $scope) {
$scope.item_id = $routeParams.id; //given that the route looks like '/item/:id'
});
Then in my HTML file this what I did
<div ng-bind="items[item_id].name"></div>
<div ng-bind="items[item_id].price"></div>
This actual solved my problem.