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. VirtualBox 安装增强工具

    菜单的: Device>insert  guest addtion. 定位: cd /media/cdrom 安装: sudo sh ./VBoxLinuxAdditions-x86.run 然 ...

  2. Python3基础 lambda表达式 简单示例

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  3. HDU-1430-素数回文

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1431 这题之前做过,又不会做了, 思路先直接暴力,输入a=5 b=500000000得到最大的值为9 ...

  4. Oracle优化:千万级大表逻辑判断的累赘

    insert into pntmall_point_detail(PNTMALL_PNT_ID,PNTMALL_PNT_DT,PNTMALL_VALIDITY,PNTMALL_LASTUPDATEDT ...

  5. Android 网格视图GridView的使用

    网格视图GridView的排列方式与矩阵类似,当屏幕上有很多元素(文字.图片或其他元素)需要按矩阵格式进行显示时,就可以使用GridView控件来实现. 本文将以一个具体的实例来说明如何使用GridV ...

  6. jQuery事件绑定、解绑、命名空间

    jQuery事件绑定.解绑.命名空间 <%@ page language="java" import="java.util.*" pageEncoding ...

  7. Sublime Text3 高亮显示Jade语法 (Windows 环境)

    首先下载git clone https://github.com/miksago/jade-tmbundle.git Jade 然后打开sublime --> 菜单栏 --> Prefer ...

  8. Java 导出Excel的各种尝试

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

  9. redis的配置详解

    redis 127.0.0.1:6379> CONFIG GET loglevel 1) "loglevel" 2) "notice" Redis 的配置 ...

  10. 10步完成Abp(.net core)+Vue的Demo?

    1.去abp官网生成项目,选择.net core1.x版本  2.Nuget还原包,需装dotnet core1.1等. 3.新增一个entity,并加入到上下文中 4.然后cmd命令行工具切换到项目 ...