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 -- 处理推送消息
简介 很多应用都会实现推送功能,我们可以集成第三方框架实现推送功能,比如: JPush推送:https://www.jpush.cn 个推:http://www.getui.com 下面来说说收到推送 ...
- 算法:寻找maximum subarray
<算法导论>一书中演示分治算法的第二个例子,第一个例子是递归排序,较为简单.寻找maximum subarray稍微复杂点. 题目是这样的:给定序列x = [1, -4, 4, 4, 5, ...
- Java对象的XML序列化(转)
转自:http://westlifesz.javaeye.com/blog/48618 java.io.Serializable引发的问题——什么是序列化?在什么情况下将类序列化? 序列化就是一种用 ...
- 黑马程序员——C语言基础 函数
Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结) (一)函数的定义 1> 任何一个C语言程序都是由一个或者多个程序段( ...
- leetcode日记 Product of Array Except Self
Given an array of n integers where n > 1, nums, return an array output such that output[i] is equ ...
- hibernate开发(2)
1 hibernate 的缓存机制 在程序运行中,hibernate要不断访问物理数据库,为了降低访问频率,提升性能,会复制一部分数据到缓存中,使得hibernate可以从缓存中读写数据,然后在特定时 ...
- a标签
a链接是一种触发行为元素,行内元素 属性:href/target/class/id/title href: <a href="www.baidu.com"></a ...
- SQL注入:突破关键字过滤
一直以来都以为只有空格,tab键和注释符/**/可以用来切割sql关键字,段时间在邪八看了风迅cms注入漏洞那篇帖子,才知道原来回车也可以用来作为分割符(以前竟然没有想到,真是失败).回车的ascii ...
- ios安装app提示【未受信任的企业级开发者】。在设置中信任此开发者
最近在测试app,ios安装app后点击提示如下图: 解决方法: 1 点击 [设置] >[通用] >[设备管理] 2 点击企业级应用 > 信任该开发者 > 信任.设置之后 ...
- LeetCode Reorder List
struct ListNode { int val; ListNode *next; ListNode(int x) : val(x), next(NULL) {} }; class Solution ...