事件(和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. 【网络流24题】No.9 方格取数问题 （二分图点权最大独立集）

    [题意] 在一个有 m*n 个方格的棋盘中, 每个方格中有一个正整数. 现要从方格中取数, 使任意 2 个数所在方格没有公共边,且取出的数的总和最大.试设计一个满足要求的取数算法. 输入文件示例inp ...

  2. SPRING IN ACTION 第4版笔记-第三章ADVANCING WIRING-005-Bean的作用域@Scope、ProxyMode

    一. Spring的bean默认是单例的 But sometimes you may find yourself working with a mutable class that does main ...

  3. BeRoTinyPascal

    https://github.com/BeRo1985/berotinypascal https://github.com/thachngopl/berotinypascal

  4. 周鸿祎——不要抱着打工心态去工作，而是把工作当创业（附读书笔记） good

    360周鸿祎反而最为开明,他说“不要抱着打工心态去工作,而是把工作当创业”,就像是,鼓励你拿着公司的工资,锻炼自己的能力,为自己以后创业积累资源和人脉(读书笔记:真是天底下最好的机会,天底下没有比工作 ...

  5. IT传道解惑：心累了就读读

    写在开始 学习不是因为缺少时间而是缺少努力 Studies this matter, lacks the time, but is lacks diligently. 只要你想学好,用心去学,肯下功夫 ...

  6. Oracle正则表达式

       Oracle正则表达式 正则表达式具有强大.便捷.高效的文本处理功能.能够添加.删除.分析.叠加.插入和修整各种类型的文本和数据.Oracle从10g开始支持正则表达式. 下面通过一些例子来说明 ...

  7. （转载）SQL联合查询中的关键语法

    (转载)http://www.cnblogs.com/zhangliyu/archive/2009/03/21/1418215.html 联合查询效率较高.以下例子来说明联合查询的好处 t1表结构(用 ...

  8. HDU-2551 竹青遍野

    http://acm.hdu.edu.cn/showproblem.php?pid=2551 妙用for循环. 竹青遍野 Time Limit: 2000/1000 MS (Java/Others)  ...

  9. ARM学习笔记11——GNU ARM汇编程序设计

    GNU ARM汇编程序设计中,每行的语法格式如下: [<label>:] [<instruction | directive | pseudo-instruction>] @c ...

  10. HDOJ/HDU 2163 Palindromes(判断回文串~)

    Problem Description Write a program to determine whether a word is a palindrome. A palindrome is a s ...