事件(和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. 探索React生态圈

    原文地址:http://www.csdn.net/article/2015-08-04/2825370-react 2004年,对于前端社区来说,是里程碑式的一年.Gmail横空出世,它带来基于前端渲 ...

  2. 在openshift上自定义node.js的版本

    https://github.com/ramr/nodejs-custom-version-openshift 由于是线上服务器,一步一步来: 先把上面的工程拉下来,覆盖到初始化的工程里,提交,让服务 ...

  3. win7 任务计划 任务映像已损坏或篡改（异常来自HRESULT:0x80041321）

    转自win7 任务计划 任务映像已损坏或篡改(异常来自HRESULT:0x80041321) 请这样操作: 1. 以管理员身份运行命令提示符并执行命令 chcp 437 schtasks /query ...

  4. [转贴]C语言复习笔记－17种小算法－解决实际问题

    判断日期为一年中的第几天(考虑闰年) /* * 计算该日在本年中是第几天,注意闰年问题 * 以3月5日为例,应该先把前两个月的加起来,然后再加上5天即本年的第几天 * 特殊情况,闰年且输入月份大于3时 ...

  5. listview异步加载sd卡图片

    package com.example.gridview; import java.io.File; import java.io.FileOutputStream; import java.io.I ...

  6. 未能找到类型或命名空间名称DbContext

    Visual Studio调试 .NET 项目时报错: 未能找到类型或命名空间名称“DbContext” 解决办法: 首先 右键 引用——System.Data.Entity 其次,在自己项目里搜索E ...

  7. 【SSSP】A forward-backward single-source paths algorithm

    0. 引子基础的算法和数据结构已经学习的差不多了,上学期期末就打算重点研究研究STOC和FOCS上面的论文.做这件事情的初衷是了解别人是如何改进原有算法的,搞清楚目前比较热的算法问题有哪些,更重要的是 ...

  8. POJ_1182_食物链_[NOI]_(并查集)

    描述  http://poj.org/problem?id=1182 共A,B,C三种动物,A吃B,B吃C,C吃A.给出询问 q : t , x , y , 表示: x 与 y 是同类 ( t==1 ...

  9. asp.net中的<%%>的几种形式的用法

    转自:http://blog.csdn.net/wang379275614/article/details/9625911 在asp.net中经常出现包含这种形式<%%>的html代码,总 ...

  10. （转载）常用JS加密编码算法 五:SHA1算法

    (转载)http://neil-yang.iteye.com/blog/703470 /* * A JavaScript implementation of the Secure Hash Algor ...