项目 上遇到 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) } };
厚积薄发,笨鸟先飞。