Angular企业级开发(8)-控制器的作用域

来源：互联网发布：树上10只鸟程序员编辑：程序博客网时间：2024/06/02 08:22

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

0 0