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

小结

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

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

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

参考资料

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

Angular企业级开发(8)-控制器的作用域的更多相关文章

  1. Angular企业级开发(7)-MVC之控制器

    1.MVC中的控制器 AngularJS的控制器主要为了把模型和视图连接在一起.大多数业务逻辑操作都会放在视图对应的控制器中.当然如果我们能够把业务逻辑放到后端的REST服务中,就可以开发轻量级Ang ...

  2. Angular企业级开发(5)-项目框架搭建

    1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...

  3. Angular企业级开发-AngularJS1.x学习路径

    博客目录 有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] ...

  4. Angular企业级开发(3)-Angular MVC实现

    1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构.MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并 ...

  5. Angular企业级开发(4)-ngResource和REST介绍

    一.RESTful介绍 RESTful维基百科 REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来 ...

  6. Angular企业级开发(2)-搭建Angular开发环境

    1.集成开发环境 个人或团队开发AngularJS项目时,有很多JavaScript编辑器可以选择.使用优秀的集成开发环境(Integrated Development Environment)能节省 ...

  7. Angular企业级开发(1)-AngularJS简介

    AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...

  8. Angular企业级开发(6)-使用Gulp构建和打包前端项目

    1.gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 ...

  9. Angular企业级开发(9)-前后端分离之后添加验证码

    1.背景介绍 团队开发的项目,前端基于Bootstrap+AngularJS,后端Spring MVC以RESTful接口给前端调用.开发和部署都是前后端分离.项目简单部署图如下,因为后台同时采用微服 ...

随机推荐

  1. 解决mysql 1864 主从错误

     从字面意思看了一下是因为slave_pending_jobs_size_max默认值为16777216(16MB),但是slave接收到的slave_pending_jobs_size_max为 ...

  2. Mybatis增加对象属性不增加mapper.xml的情况

    Mybatis增加对象属性不增加mapper.xml的情况: 只增加Model 对象的属性,在查询语句中返回相同名称的字段,但是在mapper中的 resultMap上面不进行新增字段的增加,查询结果 ...

  3. 报错找不到jquery-1.10.2.min.map解决办法

    http://fruithardcandy.iteye.com/blog/1941452

  4. Eclipse中TODO的分类，以及自动去除

    Window-Preference-Java-Compiler-Task Tags; 这里面进行TaskTag标签的定义,默认支持FIXME.TODO.XXX三种:优先级高的在taskview中 会显 ...

  5. css块级标签，行内标签，行内块标签的转换（2）

            css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...

  6. Java 导出Excel的各种尝试

    最近的一个项目比较忙,一直没时间过来跟新博客.今天过来分享一下在此项目中遇到的一个小问题:导出Excel:相信导出Excel这个功能是特别常见的,也有很多的方式.好了,不多说了,直接说说自己遇到的各种 ...

  7. 关于pandas精度控制

    最近使用pandas处理一批数据,数据中包含几个columns,它们的数据精度,例如 3.25165,1451684684168.0,0.23 处理完之后保存csv时发现,1451684684168. ...

  8. POJ1221(整数划分)

    UNIMODAL PALINDROMIC DECOMPOSITIONS Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 543 ...

  9. easyui treegrid实现显示checkbox并能获取到选定值的

    闲聊: 小颖最近忙疯了,经常被加班,昨天都要下班了,又提了个需求,虽然写的代码不多只有几行,可是测试环境很难跑通,一会就ie崩溃了,所以弄得小颖最近老是头晕. 也不知道最近是怎么了,一向特别爱吃的小颖 ...

  10. [html] 学习笔记-Canvas图形绘制处理

    使用Canvas API 可以将一个图形重叠绘制在另外一个图形上,也可以给图形添加阴影效果. 1.Canvas 图形组合 通过 globalCompositeOperation = 属性 来指定重叠效 ...