只为成功找方法,不为失败找理由。

博客园 首页 新随笔 联系 订阅 管理

项目 上遇到  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)
            }
            
    };

 

posted on 2017-03-10 14:07  诗意的活着  阅读(5489)  评论(0编辑  收藏  举报