Passing value between controllers in AngularJS

Question

As stated in the title, I'm trying to pass a value (ID) from one controller (PerksApprovalController) going to another controller (PerksDetailsController). Please find below image for visual reference.

What I want to do is, when I click the "Show Details" button, it will redirect me to another page to display the details of the Control Number that I pass.

Below is my implementation.

Show Details Button Code

<button class="btn btn-xs" ng-click="vm.showDetails(p.ControlNumber)">Show Details</button>

PerksApprovalCtrl.js

(function () {
'use strict';

var app = angular.module('app');

PerksApprovalController.$inject = ['$window', 'app.perksService', 'app.sharedValuesFactory'];
app.controller('app.perksApprovalController', PerksApprovalController);

function PerksApprovalController($window, PerksService, SharedValuesFactory) {
    /* jshint validthis:true */
    var vm = this;

    vm.showDetails = function (controlNo) {
        SharedValuesFactory.setControlNo(controlNo);
        $window.location = '/PerksDetails/PerksView';
    }
}
})();

PerksDetailCtrl.js

(function () {
'use strict';

var app = angular.module('app');

PerksDetailController.$inject = ['$scope', '$http', '$q', '$window', 'app.perksService', 'app.sharedValuesFactory'];
app.controller('app.perksDetailController', PerksDetailController);

function PerksDetailController($scope, $http, $q, $window, PerksService, SharedValuesFactory) {
    var vm = this;

    PerksService.getPerksItems(SharedValuesFactory.getControlNo()).then(function (response) {
        vm.perksItemDetails = response.data;
    });
}
})();

I have created a service just like what they suggested in some topics here.

sharedValuesFactory.js

(function () {
'use strict';

var app = angular.module('app');

// SharedValuesFactory.$inject = ['$http'];
app.factory('app.sharedValuesFactory', SharedValuesFactory);

function SharedValuesFactory() {
    var controlNoShared;
    return {
        setControlNo: function (c) {
            this.controlNoShared = c;
        },
        getControlNo: function () {
            return this.controlNoShared;
        }
    }
}
})();

My problem now is, everytime the details page is loaded, SharedValuesFactory.getControlNo() returns undefined. Looks like SharedValuesFactory is reset after the redirect or page load.

Any idea on how to properly pass a value from one controller to another?

TIA

Answer 1

I have a specific way of passing value in between Controllers. Hope it does the trick!

Note: Not Sure what sharedValuesFactory.js is being used for! Assumming You are using this service to pass Data in between Controllers only. According to me only One service suites your requirement i.e PerksService.

The button passes the value (ID) of "ControlNumber".

<button class="btn btn-xs" ng-click="vm.showDetails(p.ControlNumber)">Show Details</button>

In PerksApprovalCtrl.js pass the controlNo you are getting on button click to the url of the page as in of a different view

PerksApprovalCtrl.js

(function () {
'use strict';

var app = angular.module('app');

PerksApprovalController.$inject = ['$window', 'app.perksService'];
app.controller('app.perksApprovalController', PerksApprovalController);

function PerksApprovalController($window, PerksService) {
    /* jshint validthis:true */
    var vm = this;

    vm.showDetails = function (controlNo) {
        $window.location = ;
        $location.path('/PerksDetails/PerksView'+controlNo);
    }
}
})();

In Routes.js or the place where you define the routes of your angular application add the following lines:

.when('/PerksDetails/PerksView/:controlNo', {
    templateUrl: '<YOU DEFINE THE TEMPLATE>',
    controller: 'PerksDetailController',
    reloadOnSearch: false })

Here ":controlNo" is used to pass the value you are passing in the url from PerksApprovalController.

In PerksDetailController we get the controlNo from routeParams and pass it to your PerksService to get the details from it.

PerksDetailCtrl.js

(function () {
'use strict';

var app = angular.module('app');

PerksDetailController.$inject = ['$scope', '$http', '$q', '$window', '$routeParams', 'app.perksService'];
app.controller('app.perksDetailController', PerksDetailController);

function PerksDetailController($scope, $http, $q, $window, $routeParams, PerksService) {
    var vm = this;

    PerksService.getPerksItems($routeParams.controlNo).then(function (response) {
        vm.perksItemDetails = response.data;
    });
}
})();

Hope it Solves your problem! Thank You!