Question

我在本主题的堆栈中引用了很多问题。但它们似乎都不适合我。

我有两个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 指令导致服务被重新初始化了吗？

Answer 1

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

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

第一个必须包含所有脚本，“ng-app”和指令var d2=new Date('2015','06'-1,'08','15','34','60');。

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

目前，当您从一个页面切换到另一个页面时，您的所有javascript都已初始化，因此您将丢失所有内容。

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

如果您想要持久保存一些数据，可以使用此服务：

ng-view

Answer 2

您可以查看我之前对类似问题的回答

Access ng-model data outside of the controller

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

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

并订阅$scope.$on

Answer 3

这不起作用，如果你在两个不同的网址上有两个单独的ng-app指令，你实际上创建了两个完全独立的角度JS应用程序实例，这些实例是完全相互隔离的。

Angular JS框架用于创建“单页面应用程序”，这与基于请求的应用程序的概念略有不同。您需要的是单个应用程序并使用路由器显示不同的视图（子页面/ URL），然后在URL中的＃后添加（可以通过配置路由器检查html5mode更改）

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

3 个答案: