Passing Wert zwischen Controllern in AngularJS

Question

Wie im Titel erwähnt, Ich versuche, einen Wert zu übergeben (ID) von einem Controller (PerksApprovalController) an einem anderen Controller gehen (PerksDetailsController). Finden Sie unten Bild für visuelle Referenz.

Was ich tun möchte, ist, wenn ich die „Show Details“ klicken, wird es mich auf eine andere Seite umleiten die Details des Control Number anzuzeigen, die ich weitergeben.

Unten ist meine Implementierung.

Details anzeigen 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; 
    }); 
} 
})(); 

Ich habe einen Service erstellt, wie er in einigen Themen hier vorgeschlagen wurde.

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; 
     } 
    } 
} 
})(); 

Mein Problem ist jetzt, jedes Mal wenn die Details Seite geladen wird, SharedValuesFactory.getControlNo() kehrt undefined. Sieht so aus, als ob SharedValuesFactory nach der Umleitung oder dem Laden der Seite zurückgesetzt wird.

Haben Sie eine Idee, wie Sie einen Wert von einem Controller zum anderen übertragen können?

TIA

Answer 1

Ich habe eine bestimmte Art und Weise Wert der Weitergabe zwischen Controllern. Hoffe es macht den Trick!

Hinweis: nicht sicher, was sharedValuesFactory.js für verwendet wird! Assumming Sie verwenden diesen Service, um Daten nur zwischen Controllern zu übergeben. Laut mir nur ein Service entspricht Ihrer Anforderung, d. H. PerksService.

Die Schaltfläche übergibt den Wert (ID) von "ControlNumber".

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

In PerksApprovalCtrl.js passieren die controlNo Sie auf die Schaltfläche klicken, um die URL der Seite, wie in einer anderen Ansicht

PerksApprovalCtrl.js bekommen

(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 oder der Ort, wo Sie die Routen Ihrer Winkel Anwendung fügen Sie die folgenden Zeilen definieren:

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

Here „: controlNo“ wird verwendet, um den Wert zu übergeben Sie die URL von PerksApprovalController vorbei sind.

In PerksDetailController erhalten wir die controlNo von routeParams und übergeben Sie es Ihrem PerksService, um die Details davon zu erhalten.

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; 
    }); 
} 
})(); 

Hoffe, dass es Ihr Problem löst! Danke!