码迷,mamicode.com
首页 > Web开发 > 详细

AngularJs scope详解

时间:2017-09-10 17:38:28      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:特性   是什么   执行   cas   上下文   mit   doc   rect   cti   

一.scope是什么?

  scope是表达式(expression)的执行上下文,scope可以监测($watch)表达式(expression)的变化和传播事件($emit,$broadcast).

二.scope特性

  1.scope提供$watch API,用于监测model的变化

       2.scope提供$apply API,将angular环境外的dom操作应用到angular环境上

       3.scope通过原型,从parent scope继承属性。child scope可以直接访问parent scope上的属性,parent scope没法直接访问child scope上的属性

三.scope层次结构

  每一个angular应用有且仅有一个root scope,但可以拥有多个child scope。

       应用可以拥有多个child scope,一些directive会创建新的child scope(如ng-repeat)。当新的scope创建后,它们将作为一个child scope添加到parent scope上,这样创建了一个与它们附属的DOM相似的树结构。

      当angular对表达式求值时,它首先查看与当前元素关联的scope的属性。如果没有找到对应的属性,它将会一直向上搜索parent scope,直到到达root scope。在javascript中,这个行为被称为‘原型继承’,child scope 典型继承自它们的parent scope。

四.scope事件传播

  scope可以类似于DOM事件的方式进行事件传播。事件可以被broadcast到child scope中或者被emit到parent scope中(当前scope有监听也会执行)

  1.parent scope向child scope  broadcast 广播事件和child scope向parent scope emit 分发事件示例:

<!DOCTYPE html>
<html>
<head>
    <title>angular1.x</title>
    <script type="text/javascript" src="../lib/angular1.6.5.js"></script>
</head>
<body ng-app="app">    

    <div ng-controller="parent">
        {{count}}
        <div ng-click="$broadcast(‘toChild‘)">向子元素broadcast事件</div>
        <ul ng-controller="child">
            {{count1}}
            <li ng-click="$emit(‘toParent‘)" ng-repeat="item in [1,2,3,4,5,6,7]">{{item}}</li>
            
        </ul>
    </div>

<script type="text/javascript">
    var app = angular.module(app,[]);
    app.controller(parent,[$scope,function($scope){
        $scope.count = 1;
        $scope.$on(toParent,function(){ //child scope $emit向上分发的监听
            $scope.count++;
        });
        $scope.$on(toChild,function(){ //当前scope有监听,也会执行
            $scope.count++;
        })
    }]);

    app.controller(child,[$scope,function($scope){
        $scope.count1 = 1;
        $scope.$on(toChild,function(){  //parent scope $broadcast向下广播的监听
            $scope.count1++; 
        })
    }]);

</script>
</body>
</html>

该示例中,点击li 父元素的count会+1;点击‘向子元素broadcast事件’,父count和子的count1页也会+1,至于父的count怎么会加1是因为当前scope中有 toChild监听。

 四.scope的生命周期

AngularJs scope详解

标签:特性   是什么   执行   cas   上下文   mit   doc   rect   cti   

原文地址:http://www.cnblogs.com/erduyang/p/7501354.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!