如何在 ASP MVC 设置中将 AngularJS 中的变量从一个控制器传递到下一个控制器？答案

【问题标题】：How can I pass variables in AngularJS from one controller to next in ASP MVC setup?如何在 ASP MVC 设置中将 AngularJS 中的变量从一个控制器传递到下一个控制器？
【发布时间】：2016-07-18 14:49:53
【问题描述】：

例如，在Views/Index.cshtml 下，我有一个带有一些输入的表单，一旦填写并提交，就会通过控制器 js 文件中的一个函数，然后将window.location.pathname 重定向到另一个页面。下一页与另一个控制器/js 文件相关联。

如何将几个变量从一个传递到另一个？

我尝试过这样做，但它不起作用：

第一次尝试

_Layout.cshtml:

<html ng-app="MIScheduler">
    <head>
        ...
    </head>
    <body>
        @RenderBody()

        // AngularJS scripts
        <script src="app.js"></script>
    </body>
</html>

Index.cshtml:

<input ng-model="userID" name="userID" />
<input ng-model="userEmail" name="userEmail" />
<input type="submit" id="submit" />

@section scripts {
    <script src="HomeController.js"></script>
}

HomeController.js:

var CID = null;
var Email = null;

$scope.submit = function() {
    CID = $scope.userID;
    Email = $scope.userEmail;
    window.location.pathname = 'Home/OtherPage';
};

然后当重定向到OtherPage.cshtml:

{{cid}}
{{email}}

@section scripts {
    <script src="OtherPageController.js"></script>
}

如果我的OtherPageController.js 不输出任何内容：

$scope.cid = CID;
$scope.email = Email;

我也尝试在app.js 中实现服务并将服务传递给两个控制器，但也没有以这种方式输出。

第二次尝试

这是我尝试的第二种方法：app.js:

angular.module('moveinScheduler', [])
    .service('ShareUserInfo', function () {
        LData = {
            cid: '',
            email: ''
        }

        return {
            getValues: function () {
                return LData;
            },
            setValues: function (cid, email) {
                LData.cid = cid;
                LData.email = email;
            }
        };
    });

Index.cshtml 同上。 HomeController.cshtml:

var CID = null;
var Email = null;

$scope.submit = function() {
    ShareUserInfo.setValues(d.data.CID, d.data.Email);
    window.location.pathname = 'Home/OtherPage';
};

OtherPageController.js:

$scope.values = ShareUserInfo.getValues();

OtherPage.cshtml:

{{values}}

没有任何输出。请记住，对于这两个控制器，我将 ShareUserInfo 作为服务扩展传递给函数。

有什么想法吗？为什么我的值没有被存储/传递？

【问题讨论】：

所以你没有单页应用？您能否将查询字符串中的变量传递给 othersPage.html
@Maccurt 对于传入的电子邮件，我试图避免使用查询字符串选项。

标签： javascript asp.net angularjs asp.net-mvc

【解决方案1】：

您可以将数据保存在Window.localStorage：

HomeController.js：

angular.controller('ExampleController', function($scope) {
    $scope.submit = function() {
        var obj = {
            cid: $scope.userID,
            email: $scope.userEmail
        };
        localStorage.setItem('data', JSON.stringify(obj));
        // Make your redirect
    };
});

PageController.js：

angular.controller('PageController', function($scope) {
    var data = JSON.parse(localStorage.getItem('data'));

    console.log('data: ', data);
});

【讨论】：

['ngStrorage']的使用需要放在包括app.js在内的所有js文件中吧？
我已经移除了对ngStorage的依赖，让它变得更简单。现在您可以直接将数据保存在localStorage中。
我有一个问题，我完全按照您上面的代码所述。在HomeController.js 中，一旦我执行 $localStorage is not defined 的函数，就会出现错误。但是，如果我将 $localStorage 放入 ...('HomeController', function ($scope, $localStorage).. 代码会中断，我会得到 Error: $injector:unpr Unknown Provider
请尝试更新的响应。您收到该错误的原因是因为您必须先安装模块 ngStorage github.com/gsklee/ngStorage 并需要 ngStorage 并在控制器..
这太奇怪了。控制台是空的。在我的提交函数中，我重定向到另一个页面的方式是这样的：window.location.pathname = 'Home/OtherPage';（我在提交函数的末尾有这个），这就是它没有显示的原因吗？

【解决方案2】：

由于您没有使用单页应用程序，并且避免使用查询字符串，因此您可以使用 $http.post，并将视图模型对象传递给您的 OtherPageController。在 OtherPageController 中，实现一个 [HttpPost] 操作方法，该方法采用从您的 $http.post 调用传入的视图模型对象。

【讨论】：