您的位置:首页 > Web前端 > AngularJS

Angularjs scope

2016-01-22 19:22 661 查看
$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

  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: