事件(和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. ruby hashtable散列表

    dict={'cat'=>'abc','dog'=>'def'}puts dict.size dict.keys返回所有的key, values返回所有的value. 删除: dict.d ...

  2. vs2010 dll生成，使用问题[good]

    VS2010 动态库开发——第一章 演练:创建和使用动态链接库 (C++) 转载自[http://www.cnblogs.com/sdlypyzq/archive/2012/01/17/2324215 ...

  3. 灰度图像--图像增强 直方图均衡化（Histogram equalization）

    灰度图像--图像增强 直方图均衡化(Histogram equalization) 转载请标明本文出处:http://blog.csdn.net/tonyshengtan,欢迎大家转载,发现博客被某些 ...

  4. bzoj2754

    看到这道题一开始想到的是后缀数组+二分+rmq 类似bzoj3172 问每个串i在合并后的串出现了多少次 等价于有多少个后缀j,使得LCP(i,j)>=length(s[i]) 但是想想又不对, ...

  5. WordPress Cart66 Lite插件跨站请求伪造漏洞

    漏洞名称: WordPress Cart66 Lite插件跨站请求伪造漏洞 CNNVD编号: CNNVD-201310-524 发布时间: 2013-10-23 更新时间: 2013-10-23 危害 ...

  6. 知乎上关于c和c++的一场讨论_看看高手们的想法

    为什么很多开源软件都用 C,而不是 C++ 写成? 余天升 开源社区一直都不怎么待见C++,自由软件基金会创始人Richard Stallman认为C++有语法歧义,这样子没有必要.非常琐碎还会和C不 ...

  7. SharePoint 2010顶部链接导航栏的详细操作

    转:http://www.360sps.com/Item/UseTopLink.aspx 在SharePoint 2010环境的页面中,导航链接总体上可以分为两类,一类是显示在左侧的快速启动栏,另一类 ...

  8. Flash加载网页内容

    import flash.net.URLLoader; var m_loader:URLLoader = new URLLoader(); m_loader.addEventListener(Even ...

  9. 基础算法（二分，贪心）：NOIP 2012 疫情控制

    题目大意 给出一棵n个节点的树,根是1,要在除根节点以外的点建立检查点,使得从每条根到叶子的路径上都至少存在一个检查点.检查点由军队来建立.初始军队的位置是给定的,移动军队走一条边需要花费这条边的权值 ...

  10. MVC Model Binder 规则

    http://www.cnblogs.com/mszhangxuefei/archive/2012/05/15/mvcnotes_30.html 使用默认的Model Binder(Using the ...