angularJs事件

Angularjs通过$scope实现事件功能,因此,事件有2种,像上传播向下传播

神奇的$scop

  • $scope是一个POJO(Plain Old JavaScript Object)
  • $scope提供了一些工具方法$watch()/$apply()
  • $scope是表达式的执行环境(或者叫作用域)
  • $scope是一个树形结构,与DOM标签平行。
  • $scope对象会继承父$scope上的属性和方法。
  • 每一个Angular应用只有一个根$scope对象(一般位于ng-app上面的)
  • $scope可以传播事件,类似于DOM事件,可以向上也可以向下。
  • $scope不仅是MVC的基础,也是后面实现双向数据绑定的基础。
  • 可以用angular.element($0).scope()进行调试。

代码

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="js/vendor/angular-1.5.8.min.js"><//script>
</head>
<body ng-app="app">
<div ng-controller="EventController">
    Root scope <tt>MyEvent</tt> count : {{count}}
    <ul>
        <li ng-repeat="i in [1]" ng-controller="EventController">
            <button ng-click="$emit('MyEvent')">
                $emit('MyEvent')
            </button>
            <button ng-click="$broadcast('MyEvent')">
                $broadcast('MyEvent')
            </button>
            <br/>
            Middle scope
            <tt>MyEvent</tt> count:{{count}}
            <ul>
                <li ng-repeat="item in [1,2]" ng-controller="EventController">
                    Leaf scope
                    <tt>MyEcent</tt> count:{{count}}
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>

<script>
    var app = angular.module("app", []);

    app.controller("EventController", function ($scope) {
        $scope.count = 0;
        $scope.$on('MyEvent', function (event) {
            $scope.count++;
        })
    });
<//script>
</html>





发表于: 2月前   最后更新时间: 1月前   游览量:176
上一条: angularJs循环打印
下一条: angularjs的路由

评论…


  • 评论…
    • in this conversation