CrazyMac CrazyMac - 1 year ago 96
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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download