深入浅出AngularJS：$scope

发布时间：2020-12-17 10:13:10 所属栏目：安全来源：网络整理

导读：$scope是什么简单来说就是作用域（表达式的执行环境）；是mvc的基础，也是实现数据双向绑定的基

$scope是什么

简单来说就是作用域（表达式的执行环境）；是mvc的基础，也是实现数据双向绑定的基础。
可以理解为是与dom标签平行的树形结构，子$scope对象会继承父$scope上的属性和方法。
$rootscope是根作用域，位于ng-app上（同ng-app一样，每个单页面应用中只有一个）

$scope传播事件

经常用于在两个作用域之间进行通信，通过作用域上的事件进行交互。
类似dom，可以向上传播（$emit）或者向下传播（$broadcast）。

向上传播$emit（父级）

$emit向parent controller传递event与data

向下传播$broadcast（子级）

$broadcast向child controller传递event与data

接收事件$on

$on用于接收event与data

注意：平级既不算是父级也不算是子级哦~

经典例子

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app>
<head>
    <meta charset="UTF-8">
    <title>scope-event-propagation</title>
    <style type="text/css">
        .ng-cloak {
            display: none;
        }
    </style>
</head>
<body class="ng-cloak">
<div ng-controller="MyController">
    root scope count:{{count}}
    <ul>
        <li ng-repeat="i in [1]" ng-controller="MyController">
            <button ng-click="$emit('MyEvent')">$emit("MyEvent")</button>
            <button ng-click="$broadcast('MyEvent')">$broadcast("MyEvent")</button>
            <br/>
            middle scope count:{{count}}
            <ul>
                <li ng-repeat="item in [1,2]" ng-controller="MyController">
                    Leaf scope count:{{count}}
                </li>
            </ul>
        </li>
    </ul>
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
    function MyController($scope) {
        $scope.count = 0;
        $scope.$on("MyEvent",function() {
            $scope.count++;
        });
    }
</script>
</body>
</html>

调试

在console中，利用angular.element($0).scope()进行调试安装工具chrome插件baratang也可以直接在html上查看

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!