angularjs 监听 文档click 事件
项目 上遇到 innHTML 放入 一大段的html 内容 中带有 click 事件 如onclick="callInMethod("http://www.crm.bmcc.com.cn/kb/cs/kb/knowledge/jsspan.html?methodName=openRelateDoc&docId=2015070102GJ225722&docName=扣费主动提醒和业务订购二次确认服务")" 这样的事件 ,由于要在指定的ng-controller 内获取 onclick 函数 内的 指定 id 值。所以不得不监听 获取 这个点击事件。
为了让我的控制器能够对文档层面上的鼠标事件有所反应,我必须创建一个自定义AngularJS指令,它将会把DOM节点和控制器的$scope方法“粘合”起来。在下面的例子中,我创建了“bnDocumentClick”属性指令:
bn-docuemnt-click="handleClick($event)"
这个指令将会在当前控制器的$scope对象的上下文中处理这个给定的表达式。在下面的例子中,$event对象其实就是潜在的jQuery事件对象。
mIndex.directive(
"bnDocumentClick",
function( $document, $parse ){ //将Angular的上下文链接到DOM事件
var linkFunction = function( $scope, $element, $attributes ){ //获得表达式
var scopeExpression = $attributes.bnDocumentClick; //使用$parse来编译表达式
var invoker = $parse( scopeExpression ); //绑定click事件
$document.on(
"click",
function( event ){ //当点击事件被触发时,我们需要再次调用AngularJS的上下文。再次,我们使用$apply()来确保$digest()方法在幕后被调用
$scope.$apply(
function(){ //在scope中调用处理函数,将jQuery时间映射到$event对象上
invoker(
$scope,
{
$event: event
}
); }
); }
); //当父控制器被从渲染文档中移除时监听"$destory"事件 }; //返回linking函数
return( linkFunction ); }
);
指定 范围的标签 加入
<div id="createDiv" ng-controller="c_textHt"
bn-document-click="handleClick( $event )"></div>
controller中内容如下 :
$scope.handleClick = function( event ){
if(event.target.parentNode.parentNode.href=="javascript:"){
console.log(event.target.parentNode.parentNode)
var cc = event.target.parentNode.parentNode
console.log(cc.getAttribute("onclick"))
alert(cc.getAttribute("onclick"))
var dd =cc.getAttribute("onclick").split("docId")[1].split("&")[0].split("=")[1]
console.log(dd)
}
};
angularjs 监听 文档click 事件的更多相关文章
- day56 文件 文档处理,事件
前情回顾: 1. 前情回顾 0. 选择器补充 - 属性选择器 - $("[egon]") - $("[type='text']") - $("inpu ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- iOS:使用代理模式监听开关状态改变事件
记一次解决跨控制器监听开关状态改变的尝试. 为了统一设置UITableViewCell里的内容,自定义了UITableViewCell类的一个基类,命名为SettingCell.SettingCell ...
- Android如何监听蓝牙耳机的按键事件(转)
源: Android如何监听蓝牙耳机的按键事件 写在前面: 直接想要代码很简单,你直接把滚动条拉到最底端就可以看到.如果想要十分地了解为什么,那就按照我规划的一步一步来理解.以下测试环境以手头上有的「 ...
- AngularJS监听路由变化
使用AngularJS时,当路由发生改变时,我们需要做某些处理,此时可以监听路由事件,常用的是$routeStartChange, $routeChangeSuccess.完整例子如下: <!D ...
- 复选框 省市区 联动(监听input的change事件)
需求:省市区三级包含复选框按钮以及文字描述.点击文字显示对应的下级地区,点击复选框选择对应的下级区域勾选. 分析:监听input的change事件当点击复选框省 选择对应的第一个市区,同时默认选中第 ...
- Android怎样监听蓝牙耳机的按键事件
Android怎样监听蓝牙耳机的按键事件 写在前面: 直接想要代码非常easy,你直接把滚动栏拉到最底端就能够看到.假设想要十分地了解为什么,那就依照我规划的一步一步来理解.下面測试环境以手头上有的「 ...
- JS移动端如何监听软键盘回车事件
移动端经常项目中会有搜索之类的功能,一般实现的是按搜索按钮进行搜索,如果要像PC端一样实现按回车键进行搜索该怎么实现呢? 方法很简单,就是在搜索框的input外面套一个form标签 注意点:form ...
- el-input监听不了回车事件
vue使用element-ui的el-input监听不了回车事件,原因应该是element-ui自身封装了一层input标签之后,把原来的事件隐藏了,所以如下代码运行是无响应的: <el-inp ...
随机推荐
- Kaldi中的Chain模型
Chain模型的训练流程 链式模型的训练过程是MMI的无网格的版本,从音素级解码图生成HMM,对其使用前向后向算法,获得分母状态后验,通过类似的方式计算分子状态后验,但限于对应于转录的序列. 对于神经 ...
- Django学习手册 - 基于requests API验证(二)
原理分析: API接口验证 1.一个认证的key server端 和 client端都必须有这么一个认证key. 2.认证登录的时间限定 3.保存已验证的信息,在以后的验证不能再次登录 client ...
- MySql cmd下的学习笔记 —— 有关select的操作(max, min等常见函数)
先把之前建的goods表找到 找到最贵的本店价(max) 找到最便宜的本店价(min) 查出一共还有多少商品(count) 查看商品价的平均价(avg) 查看本店有多少种商品 当count(*)时 输 ...
- python基本数据结构栈stack和队列queue
1,栈,后进先出,多用于反转 Python里面实现栈,就是把list包装成一个类,再添加一些方法作为栈的基本操作. 栈的实现: class Stack(object): #初始化栈为空列表 def _ ...
- Ubuntu 16.04下安装MySQL5.7
原文链接:https://www.linuxidc.com/Linux/2017-06/144805.htm ps:ubuntu14.04下默认安装的是MySQL5.5 首先执行下面三条命令: sud ...
- SpringBoot整合全局异常处理&SpringBoot整合定时任务Task&SpringBoot整合异步任务
============整合全局异常=========== 1.整合web访问的全局异常 如果不做全局异常处理直接访问如果报错,页面会报错500错误,对于界面的显示非常不友好,因此需要做处理. 全局异 ...
- 序列化 java.io.Serializable
1.序列化是干什么的? 简单说就是为了保存在内存中的各种对象的状态,并且可以把保存的对象状态再读出来.虽然你可以用你自己的各种各样的方法来保存Object States,但是Java给你提供一种应该比 ...
- java中equals,hashcode和==的区别
https://www.cnblogs.com/kexianting/p/8508207.html
- WinRAR代码执行漏洞CVE-2018-20250
0x01 分析思路 利用https://github.com/googleprojectzero/winafl 漏洞分析框架模糊测试WinRAR. 几个存档格式的崩溃,例如RAR,LZH和ACE,这些 ...
- python3+requests库框架设计05-unittest单元测试框架
unittest单元测试框架,主要由四部分组成:测试固件.测试用例.测试套件.测试执行器 测试固件(test fixture) 测试固件有两部分,执行测试前的准备部分setUp(),测试执行完后的清扫 ...