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

2018-01-18 17:25:00 浏览数 (1)

scope概念

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

scope简单示例

代码语言：javascript复制
<!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>
代码语言：javascript复制
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实例
代码语言：javascript复制
<!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>
代码语言：javascript复制
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

小结

  1. scope作用域不是从ng-controller开始的，之前个人理解都是以为是ng-controller开始的标签，视图上才绑定scope的属性和方法是错误的。
  2. scope在AngularJS中了提供视图和控制器之前数据绑定的桥梁
  3. $rootScope作用域顶层，嵌套的控制器可以继承到$rootScope的属性和方法。

参考资料

  1. AngularJs之Scope作用域
  2. Angularjs学习笔记5_scope和$rootScope
angularjs

0 人点赞