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"; } });
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', 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中了提供视图和控制器之前数据绑定的桥梁
参考资料
- AngularJs之Scope作用域
- Angularjs学习笔记5_scope和$rootScope