Question

如标题所述，我试图将一个控制器（ PerksApprovalController ）的值（ID）传递给另一个控制器（ PerksDetailsController ）。请在下面找到图像以供参考。

我想要做的是，当我点击“显示详细信息”按钮时，它会将我重定向到另一个页面，以显示控制号的详细信息我通过了。

以下是我的实施。

显示详细信息按钮代码

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

我已经创建了一个服务，就像他们在这里的一些主题中建议的那样。

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

我现在的问题是，每次加载详情页面时，SharedValuesFactory.getControlNo()都会返回undefined。重定向或页面加载后，SharedValuesFactory似乎已重置。

有关如何将值从一个控制器正确传递到另一个控制器的任何想法吗？

TIA

Answer 1

我有一种在控制器之间传递值的特定方法。希望它能成功！

注意： 不确定正在使用sharedValuesFactory.js！假设您正在使用此服务仅在控制器之间传递数据。据我所知，只有一项服务满足您的要求，即PerksService。

该按钮传递“ControlNumber”的值（ID）。

<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.12/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script> <style> svg{border:2px solid black;} .red{width:50px;height:50px;background:red;} </style> </head> <body ng-app="myApp" ng-controller="myCtrl"> <svg></svg> <script> //module declaration var app = angular.module('myApp',[]); //Controller declaration app.controller('myCtrl',function($scope){ $scope.svgWidth = 500;//svg Width $scope.svgHeight = 300;//svg Height //resetting svg height and width in current svg d3.select("svg").attr("width", $scope.svgWidth).attr("height", $scope.svgHeight); //Setting up of our svg with proper calculations var svg = d3.select("svg"); //for x axis svg.append("div").attr("class", "red"); }); </script> </body> </html>

在PerksApprovalCtrl.js中传递controlNo你正在点击按钮点击页面的URL，如同在另一个视图中

<强> PerksApprovalCtrl.js

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

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

这里“：controlNo”用于传递您在PerksApprovalController中传递的值。

在PerksDetailController中，我们从routeParams获取controlNo并将其传递给PerksService以从中获取详细信息。

<强> PerksDetailCtrl.js

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

希望它能解决您的问题！谢谢！

在AngularJS中的控制器之间传递值

1 个答案: