javascript - 如何使用 $(target) inside 指令？

Question

我用两个 block 构建了一个时间选择指令。问题是在指令模板内的某些 block 上捕获目标事件。指令模板:

<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 之外的 block 消失。当用户点击 somewere inside div.block2 block 保持可见。

运行函数:

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

Answer 1

在您的模板中，将 $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 单击处理程序。

DEMO on JSFiddle .