Pass JSON data to modal using ui-router

69 views
Skip to first unread message

Wayne Vos

unread,
Dec 30, 2016, 3:38:04 AM12/30/16
to Angular

Sorry for the newbie question I want to pass my JSON data of the clicked item to my modal that has a custom url. From my understanding I would use a resolve and controller. How do I pass the data through to my modal?

Link to my site: http://wingfield.vmgdemo.co.za/

This is my $stateprovider triggering my modal:


// make back button handle closing the modal
app.run(['$rootScope', '$uibModalStack',
function ($rootScope, $uibModalStack) {
    $rootScope.$on('$stateChangeStart', function () {
        var top = $uibModalStack.getTop();
        if (top) {
            $uibModalStack.dismiss(top.key);
        }
    });
}
]);

// configure the stateProvider
app.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/showroom');
    $stateProvider
    // define home route "/"
        .state('showroom', {
            url: '/showroom',
            templateUrl: 'partials/showroom.html'
        })
        // define modal route "/modalDetails"
        .state('modalDetails', {
            url: '/modalDetails/:id',
            params: {
                id: 'TEST-parameter'
            },
            onEnter: ['$stateParams', '$state', '$uibModal',
                function ($stateParams, $state, $uibModal) {
                    $uibModal
                    // handle modal open
                        .open({
                            templateUrl: 'partials/modalDetails.html',
                            controller: ['$scope',
                                function ($scope) {
                                    // handle after clicking Cancel button
                                    $scope.cancel = function () {
                                        $scope.$dismiss();
                                    };
                                    // close modal after clicking OK button
                                    $scope.ok = function () {
                                        $scope.$close(true);
                                    };
                                }
                            ]
                        })
                        // change route after modal result
                        .result.then(function () {
                        $state.transitionTo('showroom');
                    }, function () {
                        $state.transitionTo('showroom');
                    });
                }
            ]
        });
}
]);

My controller getting my JSON data:

(function () {
            'use strict';
            var controllerId = 'showRoom';
            var app = angular.module('app').controller(controllerId, homeController);

            function homeController($http) {
                var vm = this;
                vm.data = [];
                vm.detailsdata = {};

                /*SHOWROOM SETTING*/
                vm.limit = '8';
                var companyIdFilter = 'company_id=eq.378';
                var urlData = 'http://wingfield.vmgdemo.co.za/webapi/view_stock_complete?';

                homeController.$inject = ['$http'];
                $http.get(urlData + '&limit=' + vm.limit).then(function (response) {
                    vm.data = response.data;
                });

                vm.detailsClick = function (car) {
                    vm.detailsdata = car;
                    document.title = vm.detailsdata['make'] + ' ' + vm.detailsdata['variant'] + ' | ' + vm.detailsdata['year'];

                };

                vm.modalContact = function () {
                    angular.element('#contact_mod').modal('show');
                    angular.element('#modalDetails').modal('hide');
                };
            }
        })();
Reply all
Reply to author
Forward
0 new messages