Angular JS returns undefined data in $uibModal.open()

Question

Following code returns returns items undefined in angular js.

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'];

when I click on open product a modal is opened and graph is displayed but $scope.selectedProduct = items; always returns undefined. I don't know why items object returns undefined from the resolve block $uibModal.open(). Please anyone would help?

Answer 1

As items is a dependency for your ViewProductController but you have not added it in $inject array to get resolved as dependency.

Change:

ViewProductController.$inject = ['$scope','$uibModalInstance'];

To:

ViewProductController.$inject = ['$scope','$uibModalInstance', 'items'];

Now, it's been added as dependency to get resolved for ViewProductController .