scope概念

scope(作用域)是视图和控制器之间的桥梁，scope本身是一个对象，有方法和属性。scope可以应用在视图和控制器上。

scope简单示例

  
          
          
Hello {
    {name}}!
  
    
  
{
    {sayHello()}}

var app = angular.module('plunker', []);app.controller('MainCtrl', function($scope) {  $scope.name = 'World';    $scope.sayHello=function(){    return "Angular Scope Demo";  }});

name是属性，sayHello()是方法。

$rootScope介绍

$rootScope是多个控制器都可以访问的对象，在$rootScope中定义的属性或方法可以在多个控制器中使用。但是$rootScope有可能产生诡异的问题。

AngularJS应用启动并生成视图时,会将根ng-app元素与$rootScope进行绑定。$rootScope 是所有 $scope 的最上层对象,可以理解为一个 AngularJS应用中得全局作用域对象,

$rootScope实例

  
          
          
    
    
     
{
    {name1}}
    
     
value from $rootScope:{
    {rootScopeValue}}
  
    
  
    
  
    
    
     
{
    {name2}}
    
     
value from $rootScope:{
    {rootScopeValue}}
  
    
  

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)});

小结

1. scope作用域不是从ng-controller开始的，之前个人理解都是以为是ng-controller开始的标签，视图上才绑定scope的属性和方法是错误的。

2. scope在AngularJS中了提供视图和控制器之前数据绑定的桥梁

3. $rootScope作用域顶层，嵌套的控制器可以继承到$rootScope的属性和方法。

参考资料