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)
            }
            
    };