javascript - 如何在 angular.js 中的一个 Controller 中存储来自两个不同网页的数据-6ren

javascript - 如何在 angular.js 中的一个 Controller 中存储来自两个不同网页的数据

转载作者：行者123 更新时间：2023-11-28 01:26:10

我正在尝试创建一个网页，它允许您使用 Angular.js 在服务器上创建一些任务当您想要创建一个任务时，您需要 API 因此我不想为我创建的每个任务输入 API 我只想输入一次 API，但我不想使用本地或 session 存储进行输入

并保存在我创建的 json 对象中，但是当我从不同的表单向同一对象输入数据时，它不会在同一对象中获取数据。我可以从对象中获取数据，但不能整体获取数据

 <div class="jumbotron text-center">
        <h1>Currency Alert Form</h1>
                    This form makes use platform to send you email notifications when a currency exchange rate falls or rises above a value.<br><br>
<div>

<form role="form" ng-submit="" novalidate>

	<div class="form-group">
	<input class="form-control" type="text" placeholder="Task Name" ng-model="formData.task_name" id="task_name" required>
	</div>
	
	<div class="form-group">
	<input class="form-control" type="text" placeholder="E-Mail" ng-model="formData.email" id="email" required>
	</div>

	<div class="form-group">
	<input class="form-control" type="text" placeholder="Currency" ng-model="formData.currency" id="currency" required>
	</div>
	
	<div class="form-group">
	<label for="frequency">Above</label>
	<input class="minimal" name="compare" ng-model="formData.compare" type="radio" checked  id="above" value="above">
	<label for="frequency">Below</label>
	<input class="minimal" name="compare" type="radio" ng-model="formData.compare"  id="below" value="below">
	<input type="number" step="any" name="threshold" ng-model="formData.threshold" id="threshold" placeholder="e.g. 0.9" required>
	</div>
	
	<div class="form-group">
	<button type="submit" class="btn btn-success">Submit</button>
	</div>

</form>
{{formData}}
{{formData.apiKey}}


</div>
    </div>

这是我的货币警报 HTML 代码。

 <!DOCTYPE html>
     <html ng-app="myApp">
    <head>
      
      <!-- load bootstrap and fontawesome via CDN -->
      <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
      <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

      
      <!-- load angular and angular route via CDN -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
      <script src="js/app.js"></script>
    </head> 
	<body ng-controller="generalController">   

        <!-- HEADER AND NAVBAR -->
        <header>	
            <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">waylay task center</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="#about"><i class="fa fa-shield"></i> APIs</a></li>
                    <li><a href="#contact"><i class="fa fa-comment"></i> Currency Alert</a></li>
                </ul>
            </div>
            </nav>
        </header>

        <!-- MAIN CONTENT AND INJECTED VIEWS -->
        <div id="main">
		 <div class="jumbotron text-center">
        <h1>
		 API KEYS
		 </h1>
		<div class="form-group">
		<input type="text" id="api_key" placeholder="API Key" ng-model="formData.apiKey" class="form-control"></input>
		</div>
		<div class="form-group">
		<input type="text" id="api_secret" placeholder="API Secret" ng-model="formData.apiSecret" class="form-control"></input>
		{{formData}}
		</div>
			</div>
			 <div ng-view>
			
			 </div>


        </div>

    </body>
    </html>

这个是主页。

最后是我的 .js 文件。

// app.js
var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function($routeProvider){
	
	$routeProvider
						
			
			.when('/', {
				templateUrl : 'pages/home.html',
				controller  : 'generalController'
			})

			
			.when('/about', {
				templateUrl : 'pages/about.html',
				controller  : 'generalController'
			})

			
			.when('/contact', {
				templateUrl : 'pages/contact.html',
				controller  : 'generalController'
			});
	
});



myApp.controller('generalController', function($scope){
	$scope.message = 'you are at general page';
	
	$scope.formData={
		apiKey:"",
		apiSecret:"",
		currency:"",
		task_name:"",
		compare:"",
		email:"",
		threshold:""
	};
});

最佳答案

您可以使用服务在 Controller 之间共享数据。以下是如何操作的示例

app.factory('theService', function() {  
    return {
        customers: {}
    };
});

app.controller("DashboardCtrl", function($scope, theService) {
    theService.customers = $scope.customers;
});

app.controller("ClientCtrl", function($scope, theService) { 
    $scope.customers = theService.customers; 
});

关于javascript - 如何在 angular.js 中的一个 Controller 中存储来自两个不同网页的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32023584/

文章推荐： c++ - 我可以在这个类中用嵌套类填充模板参数吗？

文章推荐： javascript - 自动创建所需数量的单选按钮问题

文章推荐： c++ - 如何使用 GCC 或 clang 导出函数名和变量名？

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在 angular.js 中的一个 Controller 中存储来自两个不同网页的数据