Angular企业级开发(8)-控制器的作用域
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()是方法。
$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)
});
小结
scope作用域不是从ng-controller开始的，之前个人理解都是以为是ng-controller开始的标签，视图上才绑定scope的属性和方法是错误的。scope在AngularJS中了提供视图和控制器之前数据绑定的桥梁$rootScope作用域顶层，嵌套的控制器可以继承到$rootScope的属性和方法。
参考资料
Angular企业级开发(8)-控制器的作用域的更多相关文章
- Angular企业级开发(7)-MVC之控制器
1.MVC中的控制器 AngularJS的控制器主要为了把模型和视图连接在一起.大多数业务逻辑操作都会放在视图对应的控制器中.当然如果我们能够把业务逻辑放到后端的REST服务中,就可以开发轻量级Ang ...
- Angular企业级开发(5)-项目框架搭建
1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...
- Angular企业级开发-AngularJS1.x学习路径
博客目录 有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] ...
- Angular企业级开发(3)-Angular MVC实现
1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构.MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并 ...
- Angular企业级开发(4)-ngResource和REST介绍
一.RESTful介绍 RESTful维基百科 REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来 ...
- Angular企业级开发(2)-搭建Angular开发环境
1.集成开发环境 个人或团队开发AngularJS项目时,有很多JavaScript编辑器可以选择.使用优秀的集成开发环境(Integrated Development Environment)能节省 ...
- Angular企业级开发(1)-AngularJS简介
AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...
- Angular企业级开发(6)-使用Gulp构建和打包前端项目
1.gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 ...
- Angular企业级开发(9)-前后端分离之后添加验证码
1.背景介绍 团队开发的项目,前端基于Bootstrap+AngularJS,后端Spring MVC以RESTful接口给前端调用.开发和部署都是前后端分离.项目简单部署图如下,因为后台同时采用微服 ...
随机推荐
- 51nod1126(矩阵快速幂)
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1126 题意:中文题诶- 思路:构造矩阵: ( 0, 1 )^ ...
- "SQLServer复制需要有实际的服务器名称才能连接到服务器,请指定实际的服务器名"转
"SQLServer复制需要有实际的服务器名称才能连接到服务器,请指定实际的服务器名" 2014-06-12 12:01:10 最近在学习SQL SERVER的高级复制技术的时候 ...
- 关于android:id="@+id/xx"的理解
之前学习android的时候,对android:id="@+id/xx"总感觉混淆,不理解,刚看了一篇文章.现在貌似是恍然大悟.故做了一下笔记,希望帮助有共同问题的人... and ...
- Raphael的鼠标over move out事件
Raphael的鼠标over move out事件 <%@ page language="java" contentType="text/html; charset ...
- ejb ql 返回object
String sqlStr="select t.car_kind,count(t) from table1 t where t.jb_date='"+jb_date+"' ...
- SSH系统介绍
SSH的系统中,对象的调用流程是:JSP->Action->Service->DAO->Hibernate,数据的流向是ActionFormBean接受用户的数据,Action ...
- Pomelo的监控模块
对服务器的监控和管理有三个主体:master,monitor,client:master负责收集所有服务器的信息,下发对服务器的操作指令.monitor负责上报服务器状态,并对master的命令作出反 ...
- JWPlayer使用指南
http://support.jwplayer.com/customer/portal/articles/1499103-quickstart-reference <div id="m ...
- FMS配置小结
官方连接:http://help.adobe.com/en_US/flashmediaserver/configadmin/WS5b3ccc516d4fbf351e63e3d119f2925e64-8 ...
- HTML5画布(CANVAS)速查简表
HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/