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接口给前端调用.开发和部署都是前后端分离.项目简单部署图如下,因为后台同时采用微服 ...
随机推荐
- volatile的理解和使用
package thread; /** * Created by Administrator on 2017/1/15. */ public class Counter { public volati ...
- PHP常用函数（收集）
<?php //===============================时间日期=============================== //y返回年最后两位,Y年四位数,m月份数字 ...
- 连接linux主机
需要工具:putty PuTTY是一个Telnet.SSH.rlogin.纯TCP以及串行接口连接软件 远程连接Linux云服务器-命令行模式 1.远程连接工具.目前Linux远程连接工具有很多种,您 ...
- 013-Cookie状态保持
常用的状态(信息)保持方式(重点) ViewState: ASP.NET 的 .aspx页面特有,页面级的: 就是在页面上的一个隐藏域中保存客户端单独使用的数据的一种方式: 服务器端控件的值都自动保存 ...
- 写过的一些shell脚本总结
每天晚上自动检查更新 #!/bin/sh #auto gamedown2 version DATE=`/bin/date +%m%d` COUNT=`curl 'http://11.1.1.1/ind ...
- js架构设计模式——从angularJS看MVVM
javascript厚积薄发走势异常迅猛,导致现在各种MV*框架百家争雄,MVVM从MVC演变而来,为javascript注入了全新的活力.我工作的业务不会涉及到 angularJS[ng] 这么重量 ...
- Heka 编译安装后 运行报错 panic: runtime error: cgo argument has Go pointer to Go pointer
Heka 编译安装后 运行报错 panic: runtime error: cgo argument has Go pointer to Go pointer 解决办法: 1. Start heka ...
- 我用Cocos2d-x模拟《Love Live!学院偶像祭》的Live场景（二）
上一章分析了Live场景中各个元素的作用,这一章开始来分析最关键的部分——打击物件的实现. 上一章放出的视频很模糊,先来看一个清晰版的复习一下:http://www.bilibili.com/vide ...
- Express4.x安装
1.首先肯定是要安装Node.JS npm install -g expressnpm install -g express-generator 运行express -V输出 4.9.0 2.创建一个 ...
- spring mvc 下载文件链接
http://www.blogjava.net/paulwong/archive/2014/10/29/419177.html http://www.iteye.com/topic/1125784 h ...