理解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 ...
随机推荐
- 后缀自动机(SAM)：SPOJ Longest Common Substring II
Longest Common Substring II Time Limit: 2000ms Memory Limit: 262144KB A string is finite sequence of ...
- Book for Opencv
Upcoming: Learning OpenCV: Computer Vision in C++ with the OpenCV Library The second edition of the ...
- bzoj1588 [HNOI2002]营业额统计（Treap）
1588: [HNOI2002]营业额统计 Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 11485 Solved: 4062[Submit][Sta ...
- zznu 1068: 进制转换
进制应该属于程序员的看家本事了,也是大家水平告别菜鸟的一个转折,所以进制转换题目是很有意义的, 这个题目是最简单的把二进制数化简成十进制,因为输入有可能有31位,所以无法使用int或者long lon ...
- sql给整数补零
update hs_user.clientorder a set a.stockcode = lpad(a.stockcode,6,'0') where a.market = 'SZ'
- Appium移动自动化测试（一）--安装Appium(转)
Appium移动自动化测试(一)--安装Appium 2015-05-30 17:48 by 虫师, 70668 阅读, 13 评论, 收藏, 编辑 Appium 自动化测试是很早之前就想学习和研究的 ...
- 关于连不上dc服务器的机器强行退出域的方法
有时加入域的计算机无法连接到之前的域了,只能强制退出域了,有两个前提条件: 1.断开网络,就是拔掉网线或者禁用网卡. 2.使用本地管理员登陆. 然后命令行执行如下命令即可: netdo ...
- 【算法与数据结构】在n个数中取第k大的数（基础篇）
(转载请注明出处:http://blog.csdn.net/buptgshengod) 题目介绍 在n个数中取第k大的数(基础篇),之所以叫基础篇是因为还有很多更高级的算法,这些 ...
- Android图片框架---Glide
Glide *** 使用* 一.添加依赖* compile 'com.github.bumptech.glide:glide:3.7.0'* compile 'com.android.support: ...
- [Angular 2] ng-control & ng-control-group
Control: Controls encapsulate the field's value, a states such as if it is valid, dirty or has error ...