angularjs 监听 文档click 事件

时间:2022-12-09 12:40:56

项目 上遇到  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 事件的更多相关文章

  1. day56 文件 文档处理&comma;事件

    前情回顾: 1. 前情回顾 0. 选择器补充 - 属性选择器 - $("[egon]") - $("[type='text']") - $("inpu ...

  2. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  3. iOS:使用代理模式监听开关状态改变事件

    记一次解决跨控制器监听开关状态改变的尝试. 为了统一设置UITableViewCell里的内容,自定义了UITableViewCell类的一个基类,命名为SettingCell.SettingCell ...

  4. Android如何监听蓝牙耳机的按键事件&lpar;转&rpar;

    源: Android如何监听蓝牙耳机的按键事件 写在前面: 直接想要代码很简单,你直接把滚动条拉到最底端就可以看到.如果想要十分地了解为什么,那就按照我规划的一步一步来理解.以下测试环境以手头上有的「 ...

  5. AngularJS监听路由变化

    使用AngularJS时,当路由发生改变时,我们需要做某些处理,此时可以监听路由事件,常用的是$routeStartChange, $routeChangeSuccess.完整例子如下: <!D ...

  6. 复选框 省市区 联动(监听input的change事件)

    需求:省市区三级包含复选框按钮以及文字描述.点击文字显示对应的下级地区,点击复选框选择对应的下级区域勾选. 分析:监听input的change事件当点击复选框省  选择对应的第一个市区,同时默认选中第 ...

  7. Android怎样监听蓝牙耳机的按键事件

    Android怎样监听蓝牙耳机的按键事件 写在前面: 直接想要代码非常easy,你直接把滚动栏拉到最底端就能够看到.假设想要十分地了解为什么,那就依照我规划的一步一步来理解.下面測试环境以手头上有的「 ...

  8. JS移动端如何监听软键盘回车事件

    移动端经常项目中会有搜索之类的功能,一般实现的是按搜索按钮进行搜索,如果要像PC端一样实现按回车键进行搜索该怎么实现呢? 方法很简单,就是在搜索框的input外面套一个form标签  注意点:form ...

  9. el-input监听不了回车事件

    vue使用element-ui的el-input监听不了回车事件,原因应该是element-ui自身封装了一层input标签之后,把原来的事件隐藏了,所以如下代码运行是无响应的: <el-inp ...

随机推荐

  1. web&period;xml 文件配置01

    web.xml 文件配置01   前言:一般的web工程中都会用到web.xml,方便开发web工程.web.xml主要用来配置Filter.Listener.Servlet等.但是要说明的是web. ...

  2. Ubuntu下用命令行快速打开各类型文件

    在Ubuntu下,通常用命令行打开文本文件,比如用命令gedit.more.cat.vim.less.但当需要打开其他格式文件时,比如pdf. jpg.mp3格式文件,咱们通常做法是进入到文件所在的目 ...

  3. 编写程序,从vector&lt&semi;char&gt&semi;初始化string

    #include<iostream> #include<string> #include<vector> using namespace std; int main ...

  4. 面试中的Https

    在Http协议中有可能存在信息窃听或身份伪装的安全问题.使用HTTPS通信机制可以有效地防止这些问题. Https Http的缺点 通信使用明文(不加密),内容可能会被窃听. 不验证通信方的身份,因此 ...

  5. bestcoder round 74 div2

    随便看了一场以前的bestcoder,然后顺便写了一下,都不码的样子 有中文题面,这里就不写题目大意了 T1. 刚开始想复杂了,T1可能是4道题里面想的最久的 我们大概弄一下就可以发现,如果a[i]& ...

  6. Python脚本日志系统

    Python通过logging模块提供日志功能,关于logging模块的使用网络上已经有很多详细的资料,这里要分享的是怎样在实际工程中使用日志功能. 假设要开发一个自动化脚本工具,工程结构如下,Com ...

  7. redis 在 php 中的应用(List篇)

    本文为我阅读了 redis参考手册 之后编写,注意 php_redis 和 redis-cli 的区别(主要是返回值类型和参数用法) 目录: List(列表) LPUSH LPUSHX RPUSH R ...

  8. Data Partitioning Guidance

    在很多大规模的解决方案中,数据都是分成单独的分区,可以分别进行管理和访问的.而分割数据的策略必须仔细的斟酌才能够最大限度的提高效益,同时最大限度的减少不利影响.数据的分区可以极大的提升可扩展性,降低争 ...

  9. Linux学习笔记13—Vi编辑器的学习

    文本编辑工具vim.vi1. vim与vi的最大区别是vim编辑的时候是带颜色显示的.Vi不带颜色显示.2. yum install -y vim-enhanced 如果没有安装VIM 使用上面的命令 ...

  10. 田螺便利店—ipconfig命令不是内部命令或外部命令怎么解决?

    查询网卡ID在运行后输入ipconfig/all点回车后提示ipconfig不是内部或外部命令,也不是可运行的程序或批处理文件? 首先确认你的输入是无误的,确保输入无误,仍提示 ipconfig 不是 ...