理解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 ...
随机推荐
- 搜索(三分)：HDU 3400 Line belt
Line belt Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- Unity Dx9 Occlusion Query plugin
//Occlusion Unity plugin #include "UnityPluginInterface.h" #include <math.h>#include ...
- C/C++常用算法【C语言顺序查找（随机数）】【1】
这是我学习唐峻,李淳的<C/C++常用算法第一天> 1.8.1. 查找数字: 程序随机生成一个拥有20个整数数据的数组,然后输入要查找的数据.接着,可以采用醉简单的逐个对比的方法进行查找, ...
- TestNG关键字和testNG.xml结构学习
转自官网:http://testng.org/doc/documentation-main.html#test-results TestNG关键字 @BeforeSuite@AfterSuite@Be ...
- windows下计算文件的md和sha值
在windows下可以使用FCIV命令行工具计算文件的md5和sha值,具体例子如下: FCIV -md5 -sha1 path\filename.ext 例如: FCIV-md5-sha1 c:\w ...
- openresty nginx 安装过程记录
转载请注明原始地址 http://www.cnblogs.com/dongxiao-yang/p/4877799.html 一 :系统版本 1 cat /etc/issue: CentOS relea ...
- mysql 字符串类型数字排序
排序字段+0,类似 Java 把 其他类型转换成字符串 比如 +“”: SELECT b.tag_value AS NAME, sum(b.uv) ASVALUE FROM met ...
- 雅虎NCP：网络黄页的终结者
雅虎NCP是什么,NCP能做什么,为什么NCP能够成为网络黄页的终结者.NCP在颠覆既有市场格局的同时,其真实目的时什么?是成为网络化操作系统还是图谋最大化长尾广告.笔者相信,过不了多久,市场将会告诉 ...
- 美丽的表格样式(使用CSS样式表控制表格样式)
按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的 ...
- Linux Top 命令解析 比较详细--转
TOP是一个动态显示过程,即可以通过用户按键来不断刷新当前状态.如果在前台执行该命令,它将独占前台,直到用户终止该程序为止.比较准确的说,top命令提供了实时的对系统处理器的状态监视.它将显示系统中C ...