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

Validating classes in Node.js using class-validator

Identify and emphasize CSS codes within PHP files using Notepad++

method for sorting labels in Select element in ReactJS

Personalizing bootstrap tabs

The feature for choosing rows is not functioning properly when using materializecss in Tabulator

Use the powerful $.post() method to transfer an image to another page seamlessly

Is there a way to modify the rounded corners of a checkbox in material-ui?

Guide on integrating HTML from a response into the render function in React JS

Interactive div with dynamically generated click event

Tips for implementing filters on `<span>` elements

In a Vue Application, the static HTML elements are loaded before fetching data

The issue of JQuery Mobile not recognizing HREF links when combined with Javascript

Making asynchronous requests using AJAX

How to align CSS counters to the right within the ::before pseudo-element

The removal of classList.remove() only eliminates the class itself, not its contents

What is the superior method for generating HTML: dynamically via PHP or jQuery AJAX?

Observing modifications in the database is possible after executing the setInterval function

When attempting to use a value outside of its block, the function may return a

No animated scrolling occurring

React DnD now enables dragging an entire list of cards instead of just a single card