Angularjs scope
2016-01-22 19:22
661 查看
$scope:
stopPropagation只针对$emit, 如果使用$scope.$broadcast(‘you’) 给you事件发送广播,那么event对象里就不会有stopPropagation方法,即使在子scope再使用$scope.$emit(‘you’)发送消息,调用该方法仍然报错。
$destroy:
$new (new,parent): 传入new会创建隔离作用域(isolate scope)??parent
$watch ( 'val', function ( newval, oldval, scope){ },boolean),
$watchGroup ( [ 'str1', 'str2' ] ,function ( newval, oldval, scope ))
$watchCollection ( obj ,function ( newval, oldval, scope ))
$watch 一般用来监听基本类型,监听对象时除非对象完全改变,也就是地址值发生改变,否则监听不到
$watchGroup会为数组中的每个变量添加一个$watch, 但只能浅监听,无法监听对象属性的改变,该属性主要是用来一次性为多个值添加浅监听
$watchCollection: 为对象或数组的属性添加浅监听,也就是只监听对象的一个层级
$apply,$digest
$id : $rootScope为1,然后scope按照在页面中出现的顺序以 2,3,4 依次排列
$root 指向$rootScope
$parent 指向父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); //10 child2.$watch("a", function (newValue) { console.log(newValue); //执行change后 11 }); $scope.change = function () { child2.a++; console.log(child1.a); //10 }; })
$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》5个实例了解Directive
- AngularJs学习
- AngularJS中控制器继承
- AngularJS学习笔记
- [改]AngularJS入门教程00:引导程序
- AngularJS中Scope间通讯Demo
- Angularjs 回到顶部指令
- AngularJS 详解
- AngularJS中有关Directive的汇总
- Angular:依赖注入
- Visual Studio 2015 Owin+MVC+WebAPI+ODataV4+EntityFrawork+Identity+Oauth2.0+AngularJS 1.x 学习笔记之"坑"
- AngularJS学习之指令作用域
- AngularJS的生命周期:complie和link
- AngularJS学习之绑定策略
- 利用angular结合translate为项目实现国际化
- AngularJs学习笔记_Index
- AngularJS的日期格式化去掉秒
- 如何在AngularJS渲染后再加载JS
- angularjs中的e2e测试实例
- angular点滴,界面上ng-model绑定的值和scope中的值不一致