Here is the code snippet that is causing the issue of returning undefined items in AngularJS:
App.js code
console.log('single page application script is working');
var myApp = angular.module("demoApp", ["ngRoute", 'ui.bootstrap','chart.js']);
myApp.controller('CtrlOne', CtrlOne);
myApp.controller('CtrlTwo', CtrlTwo);
myApp.controller('LocationController', LocationController);
myApp.controller('GridController', GridController);
myApp.controller('PaginationDemoCtrl', PaginationDemoCtrl);
myApp.controller('ViewProductController', ViewProductController);
var configFunction = function ($routeProvider, $httpProvider) {
$routeProvider.
when('/grid', {
templateUrl: 'SPA/Views/Grid.html',
controller:GridController
})
.otherwise({
redirectTo: function () {
return '/grid';
}
});
}
configFunction.$inject = ['$routeProvider', '$httpProvider'];
myApp.config(configFunction);
GridController.js
var GridController = function ($scope, $uibModal) {
$scope.data = {
lowStockData: {
totalItems: 726,
currentPage: 1,
itemsPerPage: 10,
data:[]
}
};
function getData() {
$scope.data.lowStockData.data = []; //initialize the data inside the lowStockData to empty
for (var i = 0; i < $scope.data.lowStockData.itemsPerPage; i++) {
var currentLocation = $scope.selectedLocation.Location;
var rndNum = ($scope.data.lowStockData.currentPage * 10) + i;
$scope.data.lowStockData.data.push({
SKU: "SKU" + rndNum,
ProductTitle: "Product Title" + rndNum,
OnOrder: rndNum * 2,
Due: rndNum - 1,
StockLe: rndNum,
Location:currentLocation
});
}
}
getData();
$scope.pageChanged = function () {
getData();
}
$scope.$watch('selectedLocation', function () {
console.log($scope.selectedLocation.Location);
$scope.data.lowStockData.currentPage = 1;
getData();
});
$scope.openProduct = function (product) {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: '/SPA/Views/ViewProductWindow.html',
controller: 'ViewProductController',
size: "",
resolve: {
items: function () {
console.log(product);
return product;
}
}
}
);
modalInstance.result.then(function () {
$scope.data.lowStockData.selectedItem = selectedItem;
}, function () {
console.log('Modal dismissed at: ' + new Date());
// $log.info('Modal dismissed at: ' + new Date());
});
}
}
GridController.$inject = ['$scope','$uibModal'];
ViewProductController.js
console.log("View product controller is working");
var ViewProductController = function ($scope, $uibModalInstance, items) {
console.log(items);
$scope.selectedProduct = items;
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 99, 73, 22, 11, 40],
[76, 23, 65, 88, 45, 88, 98]
];
}
ViewProductController.$inject = ['$scope','$uibModalInstance'];
Encountering an issue where clicking on 'open product' opens a modal with a graph, but $scope.selectedProduct = items; always returns undefined. Having trouble understanding why the items object is returning undefined from the resolve block $uibModal.open(). Can anyone offer some insight?