理解angularJS中作用域$scope
angularJS中作用域是什么
- 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的
- 应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文
- $scope对象是定义应用业务逻辑、控制器方法和视图属性的地方
- 作用域是视图和控制器之间的胶水,在应用将视图渲染并呈献给用户之前,视图中的模板会和作用域进行连接
作用域能做什么
- 提供观察者以监视数据模型的变化
- 可以将数据模型的变化通知给整个应用,甚至是系统外的组件
- 可以进行嵌套,隔离业务功能和数据
- 给表达式提供运算时所需的执行环境
视图和$scope
- angularJS启动并生成视图时,会将根ng-app元素同$rootScope进行绑定
- $rootScope是所有scope对象的最上层
- $rootScope是angularJS中最接近全局作用域的对象。在rootScope上附加太多业 务逻并不是好主意,这与污染JavaScript的全局作用域是一样的，代码示例:
demo.html <!doctype html>
<html ng-app="freefedApp">
<head>
<title>angular应用demo</title>
<script src="angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="helloCtrl">
<input ng-model="name" type="text" />
<button ng-click="changeText()">change</button>
<div>{{ name }}</div>
<div>apiKey:{{ apiKey }}</div>
</div>
</body>
</html>app.js /*声明module*/
var module = angular.module('freefedApp',[]).run(['$rootScope',function($rootScope){
/*freefedApp模块内都可以访问到这个模块全局变量*/
$rootScope.apiKey = 'abcdef97h5';
}]); /*声明控制器*/
module.controller('helloCtrl',['$scope',function($scope){
$scope.name = 'hello world';
$scope.changeText = function(){
$scope.name = 'hello dingdone';
};
/*监听数据模型的变化*/
$scope.$watch('name',function(newvalue,oldvalue){
});
}]);
理解angularJS中作用域$scope的更多相关文章
- 转: 理解AngularJS中的依赖注入
理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...
- 理解AngularJS中的依赖注入
点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...
- 理解vue中的scope的使用
理解vue中的scope的使用 我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取 ...
- angularjs 中的scope继承关系——（2）
转自:http://www.lovelucy.info/understanding-scopes-in-angularjs.html angularjs 中的scope继承关系 ng-include ...
- 理解angularjs的作用域
<!doctype html> <html ng-app="myApp"> <head> <script src="http:/ ...
- 理解AngularJS的作用域Scope
AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法.但有一个例外:在directive中使用scope: { ... },这种方式创建的作用域是一个独 ...
- AngularJS中监视Scope变量以及外部调用Scope方法
在AngularJS中,有时候需要监视Scope中的某个变量,因为变量的改变会影响一些界面元素的显示.有时,也希望通过jQuery调用Scope的某个方法. 比如以下场景: <div> & ...
- 怎么理解angularjs中的服务？
AngularJS中的服务其实就是提供一种方式抽取共用类库 比如说一些工具类方法,我们传统的做法就是自己写个 utility 类,把相关的工具方法填充到utility里面去,最后把utility类放到 ...
- 通俗理解angularjs中的$apply，$digest，$watch
<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...
随机推荐
- UTF8与GBK、GB2312等其他字符编码的相互转换
utf8与其他字符编码的转换是国际化必然遇到的问题. windows的api函数对: WideCharToMultiByte和MultiByteToWideChar 个人喜欢的跨平台库: 单纯做字符编 ...
- [Audio processing] 数据集生成 & 性别年龄分类训练 Python
1.重命名,Python中文路径各种错误,所以需要先将所有文件的路径名全都改成中文.用的是MAC系统,所以WIN下的命令行批处理没法解决,所以用C来完成 // Created by Carl on 1 ...
- 《Linear Algebra and Its Applications》-chaper3-行列式-从一个逆矩阵算法证明引入的行列式
这一章节开始介绍线性代数中另外一个基本概念——行列式. 其实与矩阵类似,行列式也是作为简化表述多项式的一种工具,关于行列式的历史渊源,有如下的介绍. 在介绍逆矩阵的时候,我们曾提及二阶矩阵有一个基于矩 ...
- poj1664 （递归）
放苹果 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 31295 Accepted: 19742 Description ...
- SRM 401(1-250pt, 1-500pt)
DIV1 250pt 题意:给一个整数f,则这样的正整数整数数列称为好数列:数列元素a0 >= a1 >= a2...,且a0<= f, a1 <= f-1, a2 <= ...
- @property中有哪些属性关键字？/ @property 后面可以有哪些修饰符？
出题者简介: 孙源(sunnyxx),目前就职于百度 整理者简介:陈奕龙(子循),目前就职于滴滴出行. 转载者:豆电雨(starain)微信:doudianyu 属性可以拥有的特质分为四类: 原子性- ...
- MyBatis（4）：动态SQL
什么是动态SQL MyBatis的一个强大特性之一通常是它的动态SQL能力.如果你有使用JDBC或其他相似框架的经验,你就明白条件串联SQL字符串在一起是多么地痛苦,确保不能忘了空格或者在列表的最后的 ...
- Solr使用solr4J操作索引库
Solrj是Solr搜索服务器的一个比较基础的客户端工具,可以非常方便地与Solr搜索服务器进行交互.最基本的功能就是管理Solr索引,包括添加.更新.删除和查询等.对于一些比较基础的应用,用Solj ...
- webstrom开发微信小程序说明
在操作之前,需要对webstrom做一些设置,如下 如果未安装node.js的朋友,请到如下地址 https://nodejs.org/en/ 安装(相信大家都是会的),如果安装完了之后,就使用如下的 ...
- POJ 3384 Feng Shui 半平面交
题目大意:一个人很信"Feng Shui",他要在房间里放两个圆形的地毯. 这两个地毯之间可以重叠,可是不能折叠,也不能伸到房间的外面.求这两个地毯可以覆盖的最大范围.并输出这两个 ...