前端讲义61_AngularJS的$rootScope全局对象是各个 controller 中 $scope对象的桥梁

最新推荐文章于 2024-10-18 08:57:48 发布

木生火

最新推荐文章于 2024-10-18 08:57:48 发布

阅读量432

点赞数

分类专栏： Angular

本文链接：https://blog.youkuaiyun.com/msh2016/article/details/91127304

版权

Angular 专栏收录该内容

19 篇文章

订阅专栏

本文深入探讨了AngularJS框架中$scope和$rootScope的作用与应用，详细解释了这两个对象如何作为桥梁连接不同的控制器，以及如何在HTML和JavaScript之间传递数据和事件。

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

$scope是一个指向应用模型的对象，用在 HTML (视图) 和 JavaScript (控制器)之间监控表达式和传递事件。

前面了解js，其中有全局变量与局部变量，全局变量可以在方法或者闭包内引入，而局部变量只能在其定义的方法内使用，其他方法不能引用到的。$scope跟变量性质一样。

angular中的$scope根据需求，可定义成一个变量或者是一个对象，如下：

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

app.controller('Ctrl_01',fun1);

function fun3($scope){

//定义成变量

$scope.empID = "C10094207";

$scope.empName = "木生火";

//定义成对象

$scop.emp={

ID:'C10094207';

name:'木生火';

sex:”男”

}

全局变量是各个子函数中的桥梁，同理$rootScope全局对象是各个 controller 中 $scope对象的桥梁。

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

/*run方法初始化全局的数据，仅对全局作用域起作用。在angular启动的时候运行一次。*/

app.run(fun3);

function fun3($rootScope){

//定义成变量

$rootScope.firstName = "wh";

$rootScope.lastName = "zhang";

//定义成对象

$rootScope.emp={

ID:'C10094207',

name:'木生火',

age:'45'

}

全局变量是各个子函数中的桥梁，同理$rootScope全局对象是各个 controller 中 $scope对象的桥梁。

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

/*run方法初始化全局的数据，仅对全局作用域起作用。在angular启动的时候运行一次。*/

app.run(fun3);

function fun3($rootScope){

//定义成变量

$rootScope.firstName = "wh";

$rootScope.lastName = "zhang";

//定义成对象

$rootScope.emp={

ID:'C10094207',

name:'木生火',

age:'45'

}

本例演示代码

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

<body>

<div ng-app="myApp" >
	<div ng-controller="Ctrl_01" >
	名:  <input type="text" ng-model="firstName"><br>
	姓:  <input type="text" ng-model="lastName"><br>
	姓名: {{firstName + " " + lastName}}
	</div>
	<br/>
	<div ng-controller="Ctrl_02" >
	名:  <input type="text" ng-model="firstName"><br>
	姓:  <input type="text" ng-model="lastName"><br>
	姓名: {{firstName + " " + lastName}}
	</div>
</div>

<script>
var app = angular.module('myApp', []);
/*run方法初始化全局的数据，仅对全局作用域起作用。在angular启动的时候运行一次。*/	
app.run(fun0);
function fun0($rootScope){	    
     //定义成变量
    $rootScope.firstName = "wh";
	$rootScope.lastName = "zhang";
	//定义成对象
	$rootScope.emp={
		ID:'C10094207',
		name:'木生火',
		age:'45'
	}
}
	
//在控制器1中给全局变量赋值	
app.controller('Ctrl_01', fun1);
function fun1($scope, $rootScope){
	$scope.firstName = "ximi";
    $scope.lastName = "han";
	$rootScope.firstName = $scope.firstName;
	$rootScope.lastName = $scope.lastName;
};	
	
//在控制器2中把全局变量值传递给局部变量
app.controller('Ctrl_02', fun2)
function fun2($scope,$rootScope) {
    $scope.firstName = $rootScope.firstName;
    $scope.lastName = $rootScope.lastName;
};	
</script>
</body>
</html>

演示效果