What is the best way to utilize $(target) within a directive?

Question

What is the best way to utilize $(target) within a directive?

I created a custom directive for selecting time using two blocks. The challenge is detecting the target event on specific blocks within the directive's template. Directive Template:

<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;
}
$rootScope.$on('documentClicked', function(inner, target) {
    // attempting to hide div.block2 if the user clicks outside the block
});

Main concept: when the user clicks on the document, outside of div.block2, the block disappears. If the user clicks inside div.block2, the block remains visible.

Function execution:

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

javascript jquery css angularjs

Answer 1

Answer №1

Make sure to include $event as an argument in your template's ng-click handler function.

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

In the ng-click handler, use stopPropagation() to prevent the execution of the 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)
    })
})

Ensure that you remove the $document click handler when the scope is destroyed to avoid memory leaks.

Check out the DEMO on JSFiddle.

Answer 2

Make sure to include $event as an argument in your template's ng-click handler function.

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

In the ng-click handler, use stopPropagation() to prevent the execution of the 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)
    })
})

Ensure that you remove the $document click handler when the scope is destroyed to avoid memory leaks.

Check out the DEMO on JSFiddle.

What is the best way to utilize $(target) within a directive?

Answer №1

Similar questions

Navigating between Vue Router pages triggers multiple events within the mounted() lifecycle of VueJS

Choose a sibling element using CSS styling

Update the image within the svg tag

Looking for a new slider option to replace the traditional Conveyor belt slideshow?

Display array values in JavaScript from different arrays

Unable to trigger click event

Click the toggle ng-press attribute

Looping through items using ng-repeat according to the chosen option in a select dropdown

The children's className attribute can impact the parent element

How to integrate an AngularJS page into a Node application

Is there a way to disable automatic spacing in VS code for a React file?

Issue with React occurring when attempting to delete an input component

The text is not displaying as expected due to a timeout issue

Struggling to align your image properly?

The Vue.js application appears to be functioning properly with no error messages, however

You cannot use a relative path when inserting an image tag in React

Is it possible to obtain the index of a table row using querySelector?

Implementing setTimeout with the copy button: A guide

Looking to reposition the control buttons above the slider in easySlider 1.7?

C# web service is unable to return a specific value