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 关联的。

最后，来个广告

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

结束语

AngularJS基础教程 - 目录

关于我：google.com/+YFCAO
由nooong.com提供空间支援。