CrazyMac CrazyMac - 1 month ago 9
AngularJS Question

Angular Scope object not retaining the values and returning null in HTML

I have a simple angular function where I call a service to get data and store it a Angular scope as JS array. The issue is the array in the scope object is not visible in my HTML. One thing here is I redirect my view to another HTML, I am not sure if that is a reason.

cart.items(localStorage.getItem('userEmail')).then(function(response){
$.each(response.data, function(index, element) {
$scope.vendorCartList.push(element);
});
$location.path('/vendorHome');
})


When I dump this scope array $scope.vendorCartList in the debug console, it displays the content properly.
In my HTML vendorHome.html, I am trying to retrieve the list through ng-repeat and it never works. I tried to dump the scope object, its printing null, not sure what am I missing here

<div>
{{vendorCartList}}
</div>
<div ng-repeat="elements in vendorCartList">
{{elements}}
</div>

Answer

The redirect is exactly the reason. try commenting it out. The service is being called in one scope, and when you redirect using $location.path('someUrl'), the scope changes. Hence, the issue.

If the cart items are required in the vendorHome page, inject the service there, and call the function inside vendorHome's controller.

Comments