zoukankan      html  css  js  c++  java
  • 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)
                }
                
        };
  • 相关阅读:
    整系数多项式的有理根的一个性质
    整系数多项式的有理根的一个性质
    《陶哲轩实分析》——给读者的一点建议
    《陶哲轩实分析》——给读者的一点建议
    不要把时间浪费在QQ上
    整系数多项式的整除平移不变性
    在Ubuntu上安装MATLAB
    边缘AI方案落地问题探讨
    主干开发前要知道的,4错误认识+3优势
    有了这个告警系统,DBA提前预警不是难题
  • 原文地址:https://www.cnblogs.com/wupeng88/p/6530421.html
Copyright © 2011-2022 走看看