AngularJs框架下controller间的传值方法

最新推荐文章于 2019-04-26 15:14:10 发布

原创最新推荐文章于 2019-04-26 15:14:10 发布 · 292 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AngularJs框架下controller间的传值方法

AngularJS 专栏收录该内容

18 篇文章

订阅专栏

本文介绍AngularJS框架中三种Controller间数据传递的方法：利用作用域查找、使用$emit和$broadcast事件传递机制及通过Service共享数据。这些技术帮助开发者实现模块化编程并维护数据一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[b]AngularJs框架下controller间的传值方法[/b]

[b]第一种方式[/b]
angularJS中默认情况下，当前作用域中无法找到某个属性时，就会在父级作用域中进行查找，若找不到直至查找到$rootScope。
如果在$rootScope中也无法找到程序依旧运行，但视图不会更新。

//Javascript
app.controller('ParentController', function($scope) {
$scope.person = {greeted: false};
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.person.name = 'Ari Lerner';
};
});
//HTML
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>
//result
{"greeted":false, "name": "Ari Lerner"}

[b]第二种方式[/b]
$on、$emit和$broadcast使得event、data在controller之间的传递变的简单
$emit只能向parent controller传递event与data
$broadcast只能向child controller传递event与data
$on用于接收event与data //

JavaScript
app.controller('ParentController', function($scope) {
$scope.$on('$fromSubControllerClick', function(e,data){
console.log(data); // hello
});
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.$emit('$fromSubControllerClick','hello');
};
});
//HTML
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
</div>

[b]第三种方式[/b]
利用angularJS中service单例模式的特性，服务(service)提供了一种能在应用的整个生命周期内保持数据的方式，
能够在控制器之间进行通信，且能保证数据的一致性。

JavaScript
var myApp = angular.module("myApp", []);
myApp.factory('Data', function() {
return {
name: "Ting"
}
});
myApp.controller('FirstCtrl', function($scope, Data) {
$scope.data = Data;
$scope.setName = function() {
Data.name = "Jack";
}
});
myApp.controller('SecondCtrl', function($scope, Data) {
$scope.data = Data;
$scope.setName = function() {
Data.name = "Moby";
}
});