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 ...
随机推荐
- C++小项目:directx11图形程序(五):shadersclass
这个类是用来创建着色器并设置输入布局的. 这个类比较特殊,它创建的着色器与Effect文件有关,effect文件是用高级着色语言(hlsl)编写的. shadersclass.h #pragma on ...
- 一张关于docker版本的图
今天安装了windows内测版的docker,的确是是把vitualbox换成了hyper-v,如左图,server的os 还是linux.不过之前在nanoserver上装的docker 也的确是原 ...
- [转]ZendFramework数据库操作总结
Zend_Db数据库知识 例子: Model文件: $this->fetchAll("is_jian=1","id DESC",0,2)->toAr ...
- Hollister Outlet Store
(link to hollisterco site), It's a major try. After a photographer's viewpoint, Which roughly splend ...
- BOOL和bool的区别
一. 1.类型不同 BOOL为int型 bool为布尔型 2.长度不同 bool只有一个字节 BOOL长度视实际环境来定,一般可认为是4个字节 3.取值不同 bool取值false和true,是0和1 ...
- Raspberry Pi I2C驱动 (Python)
本文参考 http://www.instructables.com/id/Raspberry-Pi-I2C-Python/all/?lang=zh 作者 AntMan232 In this instr ...
- 学习中的错误——ubuntu 14.04 LTS 启动eclipse报错
在ubuntu中启动eclipse报错:(Eclipse:15978): GLib-GIO-CRITICAL **: g_dbus_connection_get_unique_name: assert ...
- aspjpeg 组件在asp中的使用
本来好的系统,你却没有做好迁移等交接工作,所以,要麻烦死自己了-------for 凌杰 首先,该系统为asp系统,需要aspjpeg 支持.... 经过使用和测试.发现有如下小结. 1. 安装时 ...
- box-shadow
box-shadow:a b c d e; a-水平位置,相对于盒子本身在水平方向的正偏移距离: b-垂直位置: c-模糊距离: d-阴影尺寸,从盒子的边框开始算起的阴影的宽度: e-阴影颜色: f- ...
- Permutation
(M) Permutations (M) Permutations II (M) Permutation Sequence (M) Palindrome Permutation II