您的位置：首页 > Web前端 > AngularJS

angularJS--多个控制器之间的数据共享

2017-05-15 16:26 465 查看

为了在控制器之间共享数据，需要在服务中添加一个用来储存用户名的方法。记住，服务在
应用的生命周期内是单例模式的，因此可以将用户名安全地储存在其中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>12-angularjs的多个控制器数据共享</title>
<script src="../js/angularjs.js"></script>
<script src="../js/index12.js"></script>

</head>
<body>


<div ng-app="myApp">
<div ng-controller= "firstController">
<input type="text" ng-model="person.name" value="" />
firstData--{{person.name}}
</div>

<div ng-controller="secondController">
<input type="text" value="" />
secondData--{{person.name}}

<div ng-controller= "firstController">
<input type="text" ng-model="Data.message" value="" />
firstData--{{Data.message}}
</div>

<div ng-controller="secondController">
<input type="text" value="" />
secondData--{{Data.message}}
</div>
</div>
</div>

</body>
</html>
下面是控制器的写法：

var myApp = angular.module('myApp', []);

myApp.factory('Data', function(){
return {message:'Hello world1'};

});

myApp.controller('firstController', function($scope,Data){
$scope.person = {
name: "Hello word2"
};

$scope.Data = Data;
});

myApp.controller('secondController', function($scope,Data){
$scope.person = $scope.$$prevSibling.person;//基本类型不能变的，只有对象才能引用
$scope.Data = Data;
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angular服务 server angular angular实现多级控制器传值

相关文章推荐

新的分享

章节导航