理解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 ...
随机推荐
- UNITY3D 破碎 shatter
convex mesh collider + shatter rigidbody ,
- 用Processon在线绘制UML的尝试
地址https://www.processon.com/ ProcessOn是一个面向垂直专业领域的作图工具和社交网络,成立于2011年6月并于2012年启动.ProcessOn将全球的专家顾问.咨询 ...
- C++的一些内置函数
C++里面有一些内置函数,实现了一些常用功能.虽然我手写也能写出这些函数,但是在srm或者其他一些需要速度的地方,用内置函数的优势就能体现出来了. 1.__gcd(a, b),返回a,b的最大公约数, ...
- 使用python进行接口测试
最近在做接口测试,之前公司的方案是使用postman进行接口测试.但是伟大的墙导致我们只能用离线版postman..然后一个很长很长的接口列表,一个接一个的访问.我的天哪..所以萌生了一个想法,使用p ...
- dependencyManagement与dependencies区别
最近在阅读maven项目代码时,dependencyManagement与dependencies之间的区别不是很了解,现通过项目实例进行总结:项目epps-demob-pom下有一个模块是epps- ...
- [PWA] 14. Loop cursor
import idb from 'idb'; var dbPromise = idb.open('test-db', 4, function (upgradeDb) { switch (upgrade ...
- phpcms如何嵌套循环
PHPCMS V9的标签制作以灵活见长,可以自由DIY出个性的数据调用,对于制作有风格有创意的网站模板很好用,今天就介绍一个标签循环嵌套方法,可以实现对PC标签循环调用,代码如下: 在此文件里/php ...
- CSRF跨站点请求伪造漏洞问题
最近在写php,项目写完后送检发现一个漏洞问题CSRF,强行拖了我一天的时间,沉迷解决问题,茶饭不思,日渐消瘦,时间比较赶,这篇比较糙,凑合看下. 好了废话不多说下面是今天的解决方案. 博主用的是Th ...
- JDK5-自动拆装箱
拆装箱:在基本类型与其对应的引用类型之间转换 装箱:Integer iObj = 5; 拆箱:int i = 5 + iObj; 装箱时,一个字节以内的数据在一个常量池中(小整数的使用频率高),即-1 ...
- android anim 动画效果（转）
动画效果编程基础--AnimationAndroid 动画类型 Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 ...