如何将动态数据从一个模块控制器传递到另一个模块控制器答案

【问题标题】：How to pass dynamic data from one module controller to another module controller如何将动态数据从一个模块控制器传递到另一个模块控制器
【发布时间】：2014-10-08 14:08:24
【问题描述】：

我是 AngularJS 的新手，我想将动态值（用户名）从一个模块中的一个控制器传递到另一个模块中的另一个控制器。路由和其他东西工作正常。这是我的代码

loginModule.js

(function() {

      var app = angular.module("waleteros", ["ngRoute","ui.bootstrap","ngCookies"]);

        app.config(function($routeProvider) {
            $routeProvider
            .when("/",{
                templateUrl:"views/login.html",
                controller:"LoginCtrl"
            })
        }
    })

app.js

(function() {

      var app = angular.module("waleterosAdmin", ["ngRoute","ngGrid","ui.bootstrap","ngCookies"]);

      app.config(function($routeProvider) {
        $routeProvider
            .when("/home",{
                templateUrl:"homepage.html",
                controller:"HomeCtrl"
            })
        }
    })

loginCtrl.js

(function(){

        var app = angular.module("waleteros");

        var LoginCtrl= function($scope,$location)
        {
            $scope.signIn=function(email,pin)
            {
               //Some authentication code...
               //Here i want to pass the username to homectrl.js
               window.location.href="views/home.html"
            }
        }
        app.controller("LoginCtrl", LoginCtrl);
    })

HomeCtrl.js

 (function(){

        var app = angular.module("waleterosAdmin");

        var HomeCtrl=function($scope)
        {
             //Here i want to get the username
        }

        app.controller("HomeCtrl", HomeCtrl);
    })

【问题讨论】：

标签： angularjs

【解决方案1】：

你可以在模块之间共享服务，从而在模块之间传递价值，请看这里Share a single service between multiple angular.js apps 和这里sharing between modules with AngularJS?

【讨论】：

【解决方案2】：

您将使用服务来持久化数据，然后将服务注入您的控制器：

app.service("SharedProperties", function () {
    var _userName = null;

    return {
        getUser: function () {
            return _userName
        },

        setUser: function(user) {
            _userName = user;
        }
    }
});

现在注入 SharedProperties 并使用 getter/setter

var LoginCtrl= function($scope,$location, SharedProperties)
    {
        $scope.signIn=function(email,pin)
        {
           //Some authentication code...

           SharedProperties.setUser(user);
           //Here i want to pass the username to homectrl.js
           window.location.href="views/home.html"
        }
    }

var app = angular.module("waleterosAdmin");

    var HomeCtrl=function($scope, SharedProperties)
    {
         //Here i want to get the username
         var user = SharedProperties.getUser();
    }

【讨论】：

我应该在哪里写 app.service？我的意思是 loginModule.js 或 app.js
我创建一个名为services.js的新文件
K 那么 app.service 中的应用呢？我的意思是 var app = angular.module("waleterosAdmin" 或 "waleteros");
我在 HomeCtrl 中得到空值。我做了 var app = angular.module("waleterosAdmin");

【解决方案3】：

关于服务的一个警告是它们在应用程序的整个生命周期内都存在，即它们只被实例化一次。我遇到了一些场景，特别是在实现路由后，我想从服务中擦除数据以节省空间并用新数据替换它（您不想每次查看时都继续添加到此服务不同的看法）。为此，您可以编写一个“擦除”方法，调用该方法来清除路由更改上的服务，或者将数据粘贴到指令中（在其控制器上），将控制器放入它们自己的指令中，并让这些需要第一个指令，这样数据就可以从控制器访问，并且一旦声明 DOM 元素被销毁（例如在视图更改时），数据就会被擦除。

【讨论】：