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

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

javascript html angularjs

Javascript AngularJs从一个页面到另一个页面的通信,javascript,html,angularjs,Javascript,Html,Angularjs,我想使用AngularJS将变量从一个页面传输到另一个页面。我查了一下网络，但我发现仅仅是在两个控制器中传输了同一HTML页面上的值。有人能帮我吗？我在下面添加了代码。它也可能是我在代码中犯了一个错误，只是我无法找出它 JavaScript代码 var app = angular.module("appLive", []); app.factory('SharedService', function($rootScope) { var something; var setSome

我想使用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第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>


角度通信第1页



转移价值

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>


角度通信第2页



{{message}}

我认为您没有使用角度右侧。
您介绍的代码是两个不同的应用程序（角度模块），它们彼此不知道，因此，首先创建一个应用程序模块，该模块可能会使用这两个不同的模块（通过DI或只是将在它们下注册的所有代码更改为在同一模块下注册）

为了在两个不同视图（页面）之间导航，应使用角度/角度模块

如果您试图将数据从一个域传递到另一个域，您应该通过服务器而不是客户端来完成

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

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

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

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

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

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


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

如果您在两个选项卡中打开了这两个页面，并希望将变量从一个页面发送到另一个页面（因此在调用transfer时会填充消息变量），则需要使用存储事件，或者您可以使用该事件将消息发送到其他页面/选项卡

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

立即在其中添加路由，或使用ng hide/ng Show如果您有两个带有两个主模块的独立页面，则需要使用localStorage从一个页面到另一个页面获取变量。您可以创建一个服务，该服务将读取/写入两个页面共享的localStorage。我不介意使用localStorage，因为在主项目中，我需要使用多个服务器进行工作。我尝试在module类之外创建一个全局变量，但即使这样也不起作用。

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


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