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 ...
随机推荐
- 【初级】linux mkdir 命令详解及使用方法实战
mkdir命令详解及使用方法实战 名称 MKDIR 是 make directories 的缩写 使用方法 mkdir [选项(如-p)] ...目录名称(及子目录注意用分隔符隔开)... 如使 ...
- pdsh使用
原文地址:http://bbs.chinaunix.net/thread-2002080-1-1.html 当我们管理数以十计或者更多的集群系统时,往往需要在每台机器上执行同样的命令,或者拷贝同样的文 ...
- Extjs4 -- Ext.loader命名空间的配置
初次使用extjs4的版本,在配置学习Ext.Loader()进行js文件的动态加载机制,由于各种原因导致多次失败,纠结2天,现将解决时出现的问题及需要注意事项进行记录 开发环境myeclipse8. ...
- gnome3.X添加开机启动项
背景:升级gnome后发现gnome-session-properties不见了,想把sslocal随机启动遇到了麻烦... 特别说明:此为图形桌面开机启动项,因此只有通过图形桌面登陆用户后才能启动. ...
- Jquery与CSS选择器参考手册
- python模块httplib的使用
GET: #lianxi-httplib.HTTPConnection.request-get.py import httplib class HttpRequestGETTest(object): ...
- POJ 题目3280 Cheapest Palindrome(区间DP)
Cheapest Palindrome Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 7148 Accepted: 34 ...
- Queue Reconstruction by Height
Suppose you have a random list of people standing in a queue. Each person is described by a pair of ...
- log4j配置生成日志保存在数据库
利用MDC可以存储参数,MDC原理:相当于一个map将值存储起来,调用时可以根据key将自定义的在值存入对应位置(数据库或文件等).使用: 配置文件:log4j.properties ### dire ...
- JXL操作Excel
jxl是一个韩国人写的java操作excel的工具, 在开源世界中,有两套比较有影响的API可 供使用,一个是POI,一个是jExcelAPI.其中功能相对POI比较弱一点.但jExcelAPI对中文 ...