Angularjs scope
$scope:
var myapp = angular.module('myapp', []);
myapp .controller('parent', function ($scope,$timeout) { $scope.$broadcast('you');//已经发出广播 $scope.$on('you', function (event) { console.log(event);//广播已经发出才进行监听,所以不会执行这一行 }); })
.controller('child', function ($scope) { $scope.$on('you', function (event) { console.log(event);//同样不会执行 }); })
<div ng-controller="parent"> <div ng-controller="middle"> <div ng-controller="child"></div> </div> </div>
var myapp = angular.module('myapp', []); myapp .controller('parent', function ($scope, $timeout) { var myevent=$scope.$on('you', function (event, data) { console.log(event); //不会接收到通知
console.log(data); //不会接收到通知 });
//myevent()可取消监听
}) .controller('middle', function ($scope, $timeout) { $scope.$on('you', function (event, data) {
event.stopPropagation(); console.log(event); //event对象 console.log(data); //'hello' }); $scope.$on('you', function (event, data) { console.log(event); //虽然已经调用了stopPropagation,但由于是在同一个scope内,所以仍然event对象 console.log(data); //'hello' });
})
.controller('child', function ($scope) { $scope.$on('you', function (event, data) { console.log(event); //event对象
console.log(data); //'hello' }); $scope.$emit('you', 'hello'); //会返回一个event对象
})
stopPropagation只针对$emit, 如果使用$scope.$broadcast(‘you’) 给you事件发送广播,那么event对象里就不会有stopPropagation方法,即使在子scope再使用$scope.$emit(‘you’)发送消息,调用该方法仍然报错。
$destroy:
var onTimeout = function() { $scope.value += 1;
timer = $timeout(onTimeout, 1000); }; var timer = $timeout(onTimeout, 1000); $scope.value = 0;
$new (new,parent): 传入new会创建隔离作用域(isolate scope)??parent
.controller('parent', function ($rootScope, $scope) { var child1 = $scope.$new(); var child2 = child1.$new(); $scope.a = 0; child1.a = 10; console.log(child2.a); // child2.$watch("a", function (newValue) { console.log(newValue); //执行change后 }); $scope.change = function () { child2.a++; console.log(child1.a); // }; })
$watch ( 'val', function ( newval, oldval, scope){ },boolean),
$watchGroup ( [ 'str1', 'str2' ] ,function ( newval, oldval, scope ))
$watchCollection ( obj ,function ( newval, oldval, scope ))
$watch 一般用来监听基本类型,监听对象时除非对象完全改变,也就是地址值发生改变,否则监听不到
$watchGroup会为数组中的每个变量添加一个$watch, 但只能浅监听,无法监听对象属性的改变,该属性主要是用来一次性为多个值添加浅监听
.controller('parent', function ($rootScope, $scope, $timeout) { $scope.one = {a: 1}; $scope.two = {b: 2}; $scope.th3 = {c: 3}; $scope.arr = ['one', 'two'],
$scope.$watchGroup($scope.arr, function (newval, oldval) {
//一旦监听某个数组,该数组就会被锁定,对该数组无论做任何修改都不会改变监控的对象
console.log('hi'); }) $scope.change = function () { $scope.arr[2] = 'th3'; $scope.th3 = {}; //不起作用 } $scope.change2 = function () { $scope.two = {}; } })
.controller('parent', function ($rootScope, $scope, $timeout) {
$scope.a=1;
$scope.b=2;
var cal=function(scope){
return scope.a;
}
$scope.$watchGroup([cal],function(newval){
console.log('hi');
})
$scope.change=function(){
$scope.a++;
}
})
$watchCollection: 为对象或数组的属性添加浅监听,也就是只监听对象的一个层级
.controller('parent', function ($rootScope, $scope, $timeout) { $scope.one = {a: {aa: 1}}; $scope.$watchCollection('one', function (newval, oldval) { console.log('hi'); }); $scope.change = function () { $scope.one.a.aa = 2; //不能监听到 $scope.one.a = 3; //可以监听 } })
$apply,$digest
.controller('parent', function ($rootScope, $scope, $timeout) { $scope.a = 1; setTimeout(function () { $scope.$apply(function () { $scope.a++; }) }, 3000) //或者直接使用digest setTimeout(function () { $scope.a++; $scope.$digest(); }, 3000) })
$id : $rootScope为1,然后scope按照在页面中出现的顺序以 2,3,4 依次排列
$root 指向$rootScope
$parent 指向父scope
Angularjs scope的更多相关文章
- AngularJS Scope(作用域)
1. AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sc ...
- AngularJS学习之旅—AngularJS Scope作用域(五)
1.AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sco ...
- angularjs $scope.$apply 方法详解
myApp.controller('firstController',function($scope,$interval){ $scope.date = new Date(); setInterval ...
- Angularjs Scope 原型链
我们知道scope是可以继承的.scope的继承和js原型链是同一个概念. <div ng-controller="parentCtrl"> {{name}} < ...
- AngularJS–Scope(作用域)
点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Scope Scope 是一个应用程序的模块的对象.它是表达式的执行上下文.它充斥在DO ...
- AngularJS $scope 继承性 作用 生命周期
一.基本概念 作用域是一个指向应用模型的对象,相当于MVVM中的ViewModel,能绑定数据(属性)和行为(方法),能监控表达式和传递事件,是实现双向绑定的基础,是应用在 HTML (视图) 和 J ...
- [AngularJS] $scope.$watch
/** * Created by Answer1215 on 11/13/2014. */ function MainCtrl($scope){ function isLongEnough (pwd) ...
- angularjs $scope与this的区别,controller as vm有何含义?
壹 ❀ 引 初学angularjs的同学对于$scope一定不会陌生,scope(作用域)是将view(视图)与model(模板)关联起来的桥梁,通过controller(控制器)对于model的数 ...
- angularjs $scope.$watch(),监听值得变化
myApp.controller('firstController',function($scope,$interval){ $scope.date = new Date(); setInterval ...
随机推荐
- ES6模块加载
两种加载方式 加载方式 规范 命令 特点 运行时加载 CommonJS/AMD require 社区方案,提供了服务器/浏览器的模块加载方案 非语言层面的标准 只能在运行时确定模块的依赖关系及输入/输 ...
- Copy page via powershell and not save as template 分类: Sharepoint 2015-07-16 16:39 4人阅读 评论(0) 收藏
By save as template informaton of the page get lost, e.g. permissions. To avoid this, use powershell ...
- java多线程之 基本概念
一.线程的五种状态 1. 新建状态(New) : 线程对象被创建后,就进入了新建状态.例如,Thread thread = new Thread().2. 就绪状态(Runnable) ...
- 改变系统自带UITableViewCell的imageView的大小
CGSize itemSize = CGSizeMake(, ); UIGraphicsBeginImageContextWithOptions(itemSize, NO,0.0); CGRect i ...
- 探索javascript----浅析js模块化
引言: 鸭子类型: 面向对象的编程思想里,有一个有趣的概念,叫鸭子类型:“一只鸟走起来像鸭子.游起泳来像鸭子.叫起来也像鸭子,那它就可以被当做鸭子.也就是说,它不关注对象的类型,而是关注对象具有的行为 ...
- 【Python】一、除法问题及基本操作(逻辑与,if替代switch)及支持中文打印
1.查看版本 C:\Users\XXX>python -V Python 2.7.1 2.除法问题(不要整除) from __future__ import division tmp=0x3ec ...
- Quartz Core框架之CALayer
1.继承链:NSObject 2.创建一个layer (1)+ (instancetype)layer :创建和返回一个layer实例对象 (2)- (instancetype)init :返回一个初 ...
- Bzoj索引
1001 : http://ideone.com/4omPYJ1002 : http://ideone.com/BZr9KF1003 : http://ideone.com/48NJNh1004 : ...
- Activity packagename has leaked window android.widget.PopupWindow$PopupDecorView{4f92660 V.E...... .......D 0,0-455,600} that was originally added here
原因是在销毁Activity时,Activity中的popupwindow还处于显示状态. 解决方法是重写Activity的onDestroy()方法,在Activity销毁前调用popupWindo ...
- eclipse中将Maven Dependencies Libraries移除后的恢复办法
在eclipse中,如果你不小心在properties=>Java Build Path中将Maven Dependencies Libraries 移除了怎么恢复呢? 解决办法:1.右键你的项 ...