AngularJS：使用不同的ng-app指令在不同页面中的控制器之间传递数据答案

【问题标题】：AngularJS: Passing data between controllers in different pages with different ng-app directivesAngularJS：使用不同的ng-app指令在不同页面中的控制器之间传递数据
【发布时间】：2015-10-26 17:20:47
【问题描述】：

我在 stack over flow 中为此主题引用了很多问题。但它们似乎都不适合我。

我有两个 html 页面： AddUser.html 和 ListUser.html。两个页面都有相同的 ng-app="myApp" 指令，但是有两个不同的控制器。

AddUser.html
ng-app="myApp" ng-controller="userCtrl"

ListUser.html
ng-app="myApp" ng-controller="listCtrl"

我需要将从 Adduser 页面添加的数据传递到 Listuser 页面。为此我写了一个服务

app.js

var ang = angular.module('myApp', ['ngRoute']);
ang.config(function ($routeProvider) {
    $routeProvider
        .when('/Add_Users', {
            templateUrl: 'Add_Users.html',
            controller: 'userCtrl'
        })
        .when('/List_Users', {
            templateUrl: 'List_Users.html',
            controller: 'listCtrl'
        })
        .otherwise({
            redirectTo: '/Add_Users'
        });
});



service.js
ang.service('userService', function () {
    var userList = [];

    var addUser = function (newObj) {
        console.log("called addUser");
        userList.push(newObj);
        console.log("userList AFTER ADD::" + userList);
    };

    var getUsers = function () {
        console.log("called getUsers" + userList + " >>");
        return userList;
    };

    return {
        addUser: addUser,
        getUsers: getUsers
    };

});

在控制器中，我正在调用服务方法。如下所示

ang.controller('userCtrl', function ($scope,userService) {
 userService.addUser($scope.user_details);
});

并在下一个控制器中检索它

ang.controller( "listCtrl",function($scope,userService){
    $scope.userlist =  userService.getUsers();
});

但是在第二页中，对象是空的。尝试了许多解决方案，但似乎没有一个有效。

是不是因为第二页的ng-app指令导致服务重新初始化？

【问题讨论】：

使用服务传递数据
如果你读到我的问题，我已经写了一个服务。
你实现了路由吗？（在你的 Angular 应用中）
如果您使用 2 个单独的 ng-apps，那么“是”。服务将重新初始化。
是的。我的问题中也包含了这一点。

标签： angularjs angularjs-scope

【解决方案1】：

是不是因为第二页的ng-app指令，导致服务要重新初始化？

实际上你需要 3 个 html 页面。

第一个必须包含所有脚本、“ng-app”和指令ng-view。

在这种情况下，ng-view 将被您的其他 2 个 html 页面替换。

目前，当您从一个页面切换到另一个页面时，您的所有 javascript 都会被初始化，因此您会失去所有的东西。

如果您没有“根”页面，您还可以尝试另一件事：将一些数据放入会话存储（或其他浏览器存储）中。

如果你想让一些数据持久化，你可以使用这个服务：

ang.service('SessionStorageService', ['$window',function ($window) {
        var service = {
            store: store,
            retrieve: retrieve,
            clear: clear,
            clearAll: clearAll
        };

        return service;


        function store(key, value) {
            $window.sessionStorage.setItem(key, angular.toJson(value, false));
        }

        function retrieve(key) {
            return angular.fromJson($window.sessionStorage.getItem(key));
        }

        function clear(key) {
            $window.sessionStorage.removeItem(key);
        }

        function clearAll() {
            $window.sessionStorage.clear();
        }


    }]);

【讨论】：

【解决方案2】：

您好，请查看我之前对类似问题的回答

Access ng-model data outside of the controller

它的要点是使用发布订阅模型。

与，用于出版 $scope.$broadcast 或 $scope.$emit

并订阅$scope.$on

【讨论】：

【解决方案3】：

这是行不通的，如果您在两个不同的 url 上有两个单独的 ng-app 指令，您实际上是在创建两个完全独立的 Angular JS 应用程序实例，它们彼此完全隔离。

Angular JS 框架在这里创建“单页应用程序”，这与之前基于请求的应用程序的概念有点不同。您需要的是单个应用程序并使用路由器来显示不同的视图（子页面/网址），然后在 url 中的 # 之后附加这些视图（可以通过路由器检查 html5mode 的配置进行更改）

【讨论】：