AngularJS基础教程

run() 与 $rootScope

前言

从前面的学习我们知道,Controller 是有其作用范围的。那么,如果我希望给一个不在任何 Controller 作用范围之内的元素绑定数据的话,又该如何做呢?

一个案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTTP</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
{{name}}
</div>
<div ng-bind="name"></div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.name = 'AngularJS';
});
</script>
</body>
</html>

我们知道,上面这段代码在页面上只会显示一个“AngularJS”。这是因为第二个绑定 name 的 div 不在 myController 的作用范围之内。

那么,如果我希望第二个绑定 name 的 div 也能成功绑定到数据呢?这时我们可以用到 $rootScope

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTTP</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
{{name}}
</div>
<div ng-bind="name"></div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myController', function ($scope, $rootScope) {
$scope.name = 'AngularJS';
$rootScope.name = $scope.name;
});
</script>
</body>
</html>

在浏览器中运行,页面上显示有两个“AngularJS”了:

$rootScope 是“根作用域”的意思,在它上面定义的变量在整个 ng-app 作用的范围内都有效。

既然这样,那么其作用范围也包含有 myController 所作用的区域。那么,myController 的实现中的代码可简化为:

$rootScope.name = 'AngularJS';

run()

run() 一般用来定义、初始化全局的数据。

如果我们希望某些代码在所有 Controller 之前执行,那么可以将其写在 run() 里面:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTTP</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
{{name}}:{{age}}
</div>
<div ng-bind="name"></div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myController', function ($scope, $rootScope) {
$scope.age = 20;
}); app.run(function($rootScope){
$rootScope.name = 'Amanda';
});
</script>
</body>
</html>

在浏览器中查看:

run() 方法内只可在 $rootScope 上定义变量,而不可在 $scope 上定义。这是因为 $scope 是与一个 Controller 关联的,而 run() 不与任何 Controller 关联,它是与 ng-app 关联的。

最后,来个广告

若你觉得此文不错,请分享,若认为尚需改进,请点讚。

结束语