事件(和js一样有冒泡和捕获)

<html>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>

<div ng-controller="parent">parent:{{detail}}

<div ng-controller="test">

myself:{{detail}}

<div ng-controller="child">child:{{detail}}</div>

<button ng-click="addparent()">addparent</button>

<button ng-click="addchild()">addchild</button>

</div>

</div>

<script>

var app = angular.module('app', [])

.controller('parent', ['$scope',function($scope) {

    $scope.detail =1;

    $scope.$on('add',function(){

      $scope.detail +=1;

    });

}]).controller('child', ['$scope',function($scope) {

    $scope.detail =1;

    $scope.$on('add',function(){

      $scope.detail +=1;

    });

}]).controller('test', ['$scope',function($scope) {

   $scope.detail =1;

   $scope.$on('add',function(){

      $scope.detail +=1;

   });

   $scope.addparent=function(){

    $scope.$emit('add');

   };

   $scope.addchild=function(){

    $scope.$broadcast('add');

   };

}]);

angular.bootstrap(document, ['app']);

</script>

</html>

从上面的代码可以看出$on来订阅一个事件,$emit触发的事件会冒泡处理,
$broadcast触发的事件会捕获,
系统还有很多自带的事件可以订阅,比如路由成功与否的$routeChangeError和$routeChangeSuccess

ng-bind-html-unsafe(新版本中被移除,可以新建指令依赖ngSanitize)

<html>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular-sanitize.js"></script>

<div ng-controller="parent" ng-bind-html-unsafe="html"></div>

<script>

angular.module('app', ['ngSanitize']).config(['$compileProvider',

function($compileProvider) {

  $compileProvider.directive({

    ngBindHtmlUnsafe: function() {

      return function(scope, element, attr) {

        element.addClass('ng-binding').data('$binding', attr.ngBindHtmlUnsafe);

        scope.$watch(attr.ngBindHtmlUnsafe,

        function ngBindHtmlUnsafeWatchAction(value) {

          element.html(value || '');

        });

      }

    }

  });

}]).controller('parent', ['$scope',

function($scope) {

  $scope.html = "<span>aaa</span>";

}]);

angular.bootstrap(document, ['app']);

</script>

</html>

前面了解了指令的用法后,应该觉得很简单啦

Ⅶ.AngularJS的点点滴滴-- 事件的更多相关文章

  1. Ⅵ.AngularJS的点点滴滴-- 指令

    指令 基本用法 <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angul ...

  2. Ⅴ.AngularJS的点点滴滴-- 资源和过滤

    资源ngResource(依赖ngResource模块) <html> <script src="http://ajax.googleapis.com/ajax/libs/ ...

  3. AngularJS HTML DOM& 事件

    AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性 <div ng-app= ...

  4. AngularJS 学习之事件

    1.ng-click指令:定义了AngularJS点击事件 <div ng-app="" ng-controller="myCtrl"> <b ...

  5. angularJS支持的事件

    AngularJS提供可与HTML控件相关联的多个事件.例如ng-click通常与按钮相关联.以下是AngularJS支持的事件. ng-click ng-dbl-click ng-mousedown ...

  6. angularjs的touch事件

    angularJs没有touch事件.这里提供一个touch指令. ngTouch.js "use strict"; angular.module("ngTouch&qu ...

  7. Ⅳ.AngularJS的点点滴滴-- 服务

    服务(Angularjs很多方法都是服务组成的) 1.使用service方法创建的单例服务 <html> <script src="http://ajax.googleap ...

  8. Ⅲ.AngularJS的点点滴滴-- 路由

    路由ngRoute (需要依赖ngRoute模块) <html> <script src="http://ajax.googleapis.com/ajax/libs/ang ...

  9. Ⅱ.AngularJS的点点滴滴--缓存

    模板缓存-$templateCache and 缓存工厂 $cacheFactory 1.使用script标签 <html ng-app> <script src="htt ...

随机推荐

  1. 单片机系统与标准PC键盘的接口模块设计

    转自单片机系统与标准PC键盘的接口模块设计 概述     在单片机系统中,当输入按键较多时,在硬件设计和软件编程之间总存在着矛盾.对于不同的单片机系统需要进行专用的键盘硬件设计和编程调试,通用性差,使 ...

  2. Linq 筛选出一条数据

    InBoxInfo boxInfo = boxList.Find(p => p.GoodsID == goods.GoodsID.ToString().Trim() && p.S ...

  3. 【HDU 5233】Tree chain problem （树形DP+树剖+线段树|树状数组）最大权不相交树链集

    [题目] Tree chain problem Problem Description Coco has a tree, whose vertices are conveniently labeled ...

  4. 使用C#画图（饼图折线图）

    public PlaceHolder PlaceHolder1; //显示图像的控件 各个图像的类别名称如下: PictureType    图形种类    5    chChartTypeBarCl ...

  5. 利用MsChart控件绘制多曲线图表 z

    在.Net4.0框架中,微软已经将Mschart控件集成了进来,以前一直在web下面用过,原来winform下的Mschart控件更加简单更加方便,今天我们用mschart绘制一个多曲线图,话不多说, ...

  6. Reason: Server is in single user mode. Only one administrator can connect at this time

    单击Start→All Programs→Microsoft SQL Server 2008→Configuration Tools→SQL Server Configuration Manager. ...

  7. [leetcode]二分查找总结

    Search for a Range 1.最简单的想法,用最普通的二分查找,找到target,然后向左右扩张,大量的重复的target,就会出现O(n)效率. class Solution { pub ...

  8. Why do we need smart pointer and how to implement it.

    Here are two simple questions. Problem A #include <string> include <iostream> using name ...

  9. 【转】shell 教程——01 Shell简介：什么是Shell，Shell命令的两种执行方式

    Shell本身是一个用C语言编写的程序,它是用户使用Unix/Linux的桥梁,用户的大部分工作都是通过Shell完成的.Shell既是一种命令语言,又是一种程序设计语言.作为命令语言,它交互式地解释 ...

  10. Overview of the Packages JAXP

    The SAX and DOM APIs are defined by the XML-DEV group and by the W3C, respectively. The libraries th ...