scope概念
scope
(作用域)是视图和控制器之间的桥梁,scope
本身是一个对象,有方法和属性。scope
可以应用在视图和控制器上。
scope简单示例
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Scope Demo</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<hr>
<p>{{sayHello()}}</p>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.sayHello=function(){
return "Angular Scope Demo";
}
});
name
是属性,sayHello()
是方法。
Demo Link
$rootScope介绍
$rootScope
是多个控制器都可以访问的对象,在$rootScope
中定义的属性或方法可以在多个控制器中使用。但是$rootScope
有可能产生诡异的问题。
AngularJS应用启动并生成视图时,会将根ng-app
元素与$rootScope
进行绑定。$rootScope
是所有 $scope
的最上层对象,可以理解为一个 AngularJS应用中得全局作用域对象,
$rootScope
实例
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Scope Demo</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-controller="Ctrl1">
<p>{{name1}}</p>
<p>value from $rootScope:{{rootScopeValue}}</p>
</div>
<hr>
<div ng-controller="Ctrl2">
<p>{{name2}}</p>
<p>value from $rootScope:{{rootScopeValue}}</p>
</div>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($rootScope) {
$rootScope.rootScopeValue="The value from $rootScope";
});
app.controller('Ctrl1', function($scope) {
$scope.name1="username in Ctrl1";
});
app.controller('Ctrl2', function($scope,$rootScope,$timeout) {
$scope.name2="username in Ctrl2";
$timeout(function(){
$rootScope.rootScopeValue="change $rootScope value in Ctrl2";
},3000)
});
$rootScope Demo
小结
-
scope
作用域不是从ng-controller
开始的,之前个人理解都是以为是ng-controller
开始的标签,视图上才绑定scope
的属性和方法是错误的。 -
scope
在AngularJS中了提供视图和控制器之前数据绑定的桥梁 -
$rootScope
作用域顶层,嵌套的控制器可以继承到$rootScope
的属性和方法。
参考资料
- AngularJs之Scope作用域
- Angularjs学习笔记5_scope和$rootScope