AngularJS 控制器之间通信保证数据一致

最新推荐文章于 2025-08-14 12:13:46 发布

原创最新推荐文章于 2025-08-14 12:13:46 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AngularJS #控制器 #数据一致

angularjs 专栏收录该内容

29 篇文章

订阅专栏

本文通过一个实例，展示了如何使用AngularJS的服务（Service）作为单例在整个应用中保持和传递数据，实现不同控制器之间的数据共享。服务提供了一个统一的数据访问接口，确保了数据一致性。

<!DOCTYPE html>
<html ng-app="my_app">
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			var app = angular.module("my_app", []);
			// 利用angularJS中service单例模式的特性，
			// 服务(service)提供了一种能在应用的整个生命周期内保持数据的方式，
			// 能够在控制器之间进行通信，且能保证数据的一致性。
			// 一般我们都会封装server来为应用提供访问数据的接口，或者跟远程进行数据交互。
			app.factory('Data', function() {
				return {
					name: '张三',
					address: '浙江'
				}
			});
			app.controller('FirstCtrl', function($scope, Data) {
				$scope.data = Data;
				$scope.setUser = function(name,addresss) {
					Data.name = name;
					Data.address=addresss;
				}
				$scope.getUser = function() {
					alert(JSON.stringify(Data));
				}
			});
			app.controller('SecondCtrl', function($scope, Data) {
				$scope.data = Data;
				$scope.setUser = function(name,addresss) {
					Data.name = name;
					Data.address=addresss;
				}
				$scope.getUser = function() {
					alert(JSON.stringify(Data));
				}
			});
		</script>
	</head>
	<body>
		<div ng-controller="FirstCtrl">
			<button ng-click="setUser('李四','四川');">李四</button>
			<button ng-click="getUser();">获取用户</button>
		</div>
		<div ng-controller="SecondCtrl">
			<button ng-click="setUser('王五','广西');">王五</button>
			<button ng-click="getUser();">获取用户</button>
		</div>
	</body>
</html>