如何使用$（target）內部指令？

我使用兩個模塊構建時間選擇指令。問題是在指令模板中的某些塊上捕獲目標事件。指令模板：

<div class='time-picker-container'> 
    <div class='block1' ng-click='show()'>1</div> 
    <div class='block2' ng-show='selectVisible'>2</div> 
</div>

JS：

scope.selectVisible = false; 
scope.show = function() { 
    scope.selectVisible = scope.selectVisible ? false : true; 
} 
$rootScope.$on('documentClicked', function(inner, target) { 
    //try to hide div.block2 if user make click outside block. 
});

基本思想：當用戶使點擊文件，外面div.block2，塊消失。當用戶點擊一些內部div.block2塊保持可見時。

上運行的功能：

angular.element(document).on('click', function(e) { 
     $rootScope.$broadcast('documentClicked', angular.element(e.target)); 
    });

來源

2016-02-02 Darien Fawkes

「documentClicked」是否已經有廣播？有助於讓該事件對象與 – charlietfl

一起工作，在運行功能上。我編輯了帖子。 –

在你的模板，添加$event作爲參數傳遞給ng-click處理函數。

<div class='time-picker-container'> 
    <div class='block1' ng-click='show($event)'>1</div> 
    <div class='block2' ng-show='selectVisible'>2</div> 
</div>

然後在你的ng-click處理程序使用stopPropagation()防止outsideClickHandler從獲取調用。

angular.module("myApp").controller("myVm", function($scope, $document) { 
    var vm = $scope; 
    vm.selectVisible = false; 

    vm.show = function(event) { 
     console.log("inside click"); 
     event.stopPropagation(); 
     vm.selectVisible = vm.selectVisible ? false : true; 
    } 

    function outsideClickHandler(e) { 
     console.log("outside click"); 
     $scope.$apply("selectVisible = false"); 
    } 
    $document.on("click", outsideClickHandler); 

    $scope.$on("destroy", function() { 
     $document.off("click", outsideClickHandler) 
    }) 
})

爲防止內存泄漏，請確保在範圍被銷燬時刪除$ document click處理程序。

The DEMO on JSFiddle。

來源

2016-02-03 02:48:22 georgeawg

如何使用$（target）內部指令？

回答

相關問題