After spending several hours trying to troubleshoot the issue with my angular $scope, I still can't seem to pinpoint what's wrong. I'm using Angular.js with Ionic in my app, and I believe the problem lies within Angular.
Within my app, I have a "add to wishlist" feature. When a user taps on "add to wishlist" in the product detail view, the product is added to the database using a service and webSQL. However, when the user navigates to the wishlist view, the saved products do not update accordingly.
The menu.html file contains an Ionic side-menu:
<ion-side-menu side="left" expose-aside-when="large" width="72">
<ion-content>
<ion-list ng-controller="LeftMenuCtrl">
<ion-item nav-clear menu-close ng-href="#/app/wish" ng-click="updateWishList()" ng-class="{'current': isActive('/app/wish')}">
<span class="icon icon-menu-wish"></span>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
The "LeftMenuCtrl" manages the active menu item hover state. In the WishListView, I want to display the currently added products:
<ion-view hide-nav-bar="true" view-title="WISHLIST" ng-controller="WishlistCtrl">
<div class="bar bar-header bar-stable">
<div class="header-wrapper">
//heading content here
</div>
</div>
<ion-content class="has-header">
<ion-item class="product-card" ng-repeat="product in products">
<div class="card">
EAN: {{product.ean}}
</div>
</ion-item>
</ion-content>
</ion-view>
And the controller for the Wishlist:
app.controller("WishlistCtrl", function($scope, $state, productService) {
//get initial wishlist products
productService.getWishlistProducts().then(function (products) {
$scope.products = products;
});
//update wishlist when user clicks on the navigation but does not properly update the $scope
$scope.updateWishList = function () {
productService.getWishlistProducts().then(function (products) {
$scope.products = products;
});
};
})
If anyone could shed some light on what's going wrong here, I would greatly appreciate it.
Edit: Here is the state configuration for the menu link:
.state('app.wish', {
url: "/wish",
views: {
'menuContent': {
templateUrl: "templates/wish.html"
}
}
})
Edit2:
Upon refreshing the page, all added products show up eventually, leading me to think that the $scope.updateWishList() creates another $scope...
Edit3:
app.controller('ProductDetailCtrl', function($stateParams ,$state, $scope, productService, $ionicHistory, $ionicPopup) {
$scope.addToWishlist = function(ean) {
productService.addProductToWishlist(ean).then(function(response) {
if(response == "OK") {
var alertPopup = $ionicPopup.alert({
title: 'product added to wishlist',
template: 'You can go to your wishlist to see all your marked products'
});
}
});
};
})
Edit4: I have created a Plunker: http://plnkr.co/edit/0woPfN Although it's not functioning as expected, you can review the code there (unnecessary content removed).