Question

我想使用AngularJS将变量从一个页面传输到另一个页面。我查了一下网，但我发现只是将值转移到两个控制器内的同一个HTML页面上。有人可以帮助我这里，以便做到这一点我已经添加了下面的代码。它也可能是我在代码中出错，只是我无法弄明白。

JavaScript代码

var app = angular.module("appLive", []);
app.factory('SharedService', function($rootScope) {
    var something;
    var setSomething = function(something) {
        this.something = something;
    }
    var getSomething = function() {
        return something;
    }
    return {
        setSomething: setSomething,
        getSomething: getSomething
    }
});
app.controller("CTRL1", function($scope, SharedService) {
    $scope.transfer = function(value) {
        SharedService.setSomething(value)
        console.log("Value Transfered")
    }
});
app.controller("CTRL2", function($scope, SharedService) {
    $scope.initFunction = function() {
        $scope.message = SharedService.getSomething();
    }
});

HTML Page 1

<html>
    <head>
        <title>Angular Communication Page 1</title>
        <SCRIPT src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.js"></SCRIPT>
        <script src = "JavaScriptCode.js"></script>
    </head>
    <body>
        <div ng-app = "appLive" ng-controller="CTRL1">
            <input type = "text" ng-model = "dataInput">
            <br><br>
            <button ng-click = "transfer(dataInput)">Transfer the value</button>
        </div>
    </body>
</html>

HTML第2页

<html>
     <head>
        <title>Angular Communication Page 2</title>
        <SCRIPT src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.js"></SCRIPT>
        <script src = "OnlineJavaScriptCode.js"></script>
    </head>
    <body>
        <div ng-app = "myModule" ng-controller="ControllerOne" ng-init = "initFunction()">
            <input type = "text" ng-model = "message">
            <br><br>
            {{message}}
        </div>
    </body>
</html>

Answer 1

我认为你没有使用棱角分明您提供的代码是两个不同的应用程序（角度模块），彼此不了解，所以首先创建一个可能使用两个不同模块的应用程序模块（通过DI或仅更改所有代码）在他们注册的同一模块下注册。

要在两个不同的视图（页面）之间导航，您应该使用有棱角的ngRoute / ui-router模块。

如果您尝试将数据从一个域传递到另一个域，则应通过服务器而不是客户端进行。

在当前设置中，没有角度方式传递数据，因为每个模块都会引导不同的应用程序，预打开的应用程序将被销毁。

如果您在同一个域中，则可以使用localStorage或sessionStorage。

Answer 2

回答您的确切问题，您可以使用localStorage在同一个域中的两个页面之间共享数据（如果您有两个域，则可以阅读this article）。

您可以创建将在两个页面中使用的服务（包含在两个模块中）：

var module = angular.module('common', []);
module.factory('SharedService', function() {
   return {
       setSomething = function(value) {
           localStorage.setItem('something', value);
       },
       getSomething = function() {
           return localStorage.getItem('something');
       }
   };
});

您可以在两个页面中使用此模块：

angular.module("appLive", ['common']);


angular.module("myModule", ['common']);

如果您已在两个标签页中打开这两个页面并希望将变量从一个页面发送到另一个页面（因此在调用transfer时填充了消息变量），那么您将需要使用存储事件或者您可以使用{ {3}}使用此事件将消息发送到其他页面/标签。

但是如果您正在构建应用程序，则应该使用一个页面和一个主模块，并使用ui-router或ng-route创建具有不同URL的路由，并基于该开放的不同视图，如@所述。 obyFS。

AngularJs从一个页面到另一个页面的通信

2 个答案: