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 ...
随机推荐
- iOS程序启动过程
First, the function creates the main application object (step 3 in the flowchart). If you specify ni ...
- 与焊接厂交流——从生产角度出发的PCB设计心得
上周的时候,去了趟加工厂盯电路板的焊接进度.然后在闲余的时候,跟焊接厂的工程师交流了一下,工程师从生产的角度,说了几个值得注意的事项: 1.元件的焊盘应该要窄长,不能过宽.因为,在过机表贴时,焊盘上的 ...
- rpc使用JUnit模块测试设计的方法及常见问题
RPC:Remote Procedure Call 远程过程调用 Wikipedia:http://en.wikipedia.org/wiki/Remote_Procedure_Call 百度百科:h ...
- 简单高效快捷的百度地图demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
- centos添加硬盘
fdisk -l ## 这里是查看目前系统上有几块硬盘 Disk /dev/sda: 36.4 GB, 36401479680 bytes 255 heads, 63 sectors/track, 4 ...
- python简单文件操作
写软件著作申请,需要将所有源代码代码贴入一个word中,在源代码前后要添加一些标记,如下: //////////////////////////// //filename1 ///////////// ...
- Pressure-sensitive pores scattered
Some researchers take issue with this however - a shark's vision is too good and its sense of smell ...
- ie7、ie8 下Table 中 td 列固定宽度 未按样式设定显示 曲线解决方案
<!doctype html> <html> <head> <meta charset='utf-8'> <style> .title {b ...
- rails 常用的验证方法 validates (转)
Agile Web Development with Rails 17.4 validation validate 在save的时候激活validate_on_create ...
- Hive的内表和外表以及分区表
1. 内表和外表的区别 内表和外表之间是通过关键字EXTERNAL来区分.删除表时: 内表:在删除时,既删除内表的元数据,也删除内表的数据 外表:删除时,仅仅删除外表的元数据. CREATE [EXT ...