Send the component to the Angular directive

I am currently working on a popup directive that is similar to the one found at https://github.com/angular-ui/bootstrap/blob/master/src/modal/modal.js

My goal is to position the popup close to the element that triggered its opening.

What would be the most effective method to achieve this? Could capturing the initiator using ng-click="open($event)" and passing it to the directive be a viable solution? (you can see an example of capturing the element here)

$scope.open= function (e) {
   var elem = angular.element(e.srcElement);
}

How can I then pass this angular.element(e.srcElement) to the directive? The directive would need to perform calculations based on the position of the passed DOM element in order to re-position the popup.

javascriptangularjs

Answer №1

Handling it in the same way as any other scope property is simple; just pass it like this, for example: modal el="clickedElement":

<button id="myId" ng-class="{'blueBg': blueBg}" ng-click="hi($event)">click me</button> 
<div modal el="clickedElement"></div>


angular.module('Test',[])
.controller('Foo', function ($scope, $element) {
    $scope.blueBg = false;
    $scope.hi = function (ev) {
       $scope.blueBg = true;
       $scope.clickedElement = angular.element(ev.srcElement);
    }
})
.directive('modal', function() {
    return {
        link: function(scope, element, attrs) {
            scope.$watch(attrs.el, function(value) {
                if(value !== undefined) {
                    console.log('element=',value);
...

Code Snippet

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Tips for positioning the center of a map with the help of external latitude and longitude

I have developed a program that extracts an address from a database. To obtain the latitude and longitude of the address, I utilized geocoder (https://www.npmjs.com/package/geocoder). Now, every time I click a button to retrieve the address, I want the map ...

javascriptreactjsgoogle-mapsgoogle-maps-api-3

Avoid overwriting the success response parameter in jQuery Ajax

I've encountered a perplexing issue where the response parameter from the first ajax call is being overridden by the second call's parameter. Here is the code snippet: http://pastebin.com/degWRs3V Whenever both drawDonutForExternalLogin and dra ...

javascriptjqueryajax

Is it best practice for an Angular service to deliver processed data or raw data?

I have a project where I am developing a service to fetch data via HTTP request. app.controller('WarriorsCtrl', function($scope, warriorService) { warriorService.getWarriors(function(warriors){ $scope.warriors = warriors; }); }); app.fa ...

angularjsangular-services

Enhancing Angular with Plotly: Implementing click events on bar chart legends

I'm currently working on implementing color pickers for my plotly-plot charts within an Angular template. I am looking to add a function that triggers when the chart legend is clicked. How can I achieve this and get a click event for the chart legends ...

javascriptangulareventschartsplotly

Navigating in React: A Guide to Switching Components

I'm currently working on a landing page project using React. The goal is to have a consistent navigation bar across all sections of the website, with only the active state changing based on user interaction. Within my App.js file, I've implement ...

javascriptreactjsmaterial-uijsx

What could have occurred if you reassigned setInterval to a variable within the useEffect hook?

Can multiple setInterval functions be defined repeatedly to the same variable in a React hook useEffect? After checking, I found that the variable has a new setInterval id value every time it is defined. However, I am curious if there are any instances re ...

javascriptreactjssetintervaluse-effect

Monitoring Changes in Input Values within PHP foreach Loop using jQuery

In my PHP code, I have a foreach loop inside a form that populates input values from a database. Each input has a unique ID generated based on the loop index. <form class="form-horizontal"> <?php $count = 0; foreach ($value as ...

javascriptphpjqueryforeach

How come pagination links in Vue.js 2 return JSON when clicked?

My question relates to having 2 specific components: Firstly, there is a component called SearchResultVue.vue. The structure of this component is as follows : <template> ... <span class="pull-right" v-show="totalall>8"> ...

javascriptjsonvue.jslaravel-5.3vuejs2

JavaScript ACTING UP -> CROSS-ORIGIN RESOURCE ACCESS ERROR

After extensive research and troubleshooting, it dawned on me that the issue was not with JavaScript itself. Instead, I was facing a cross origin resource exception, which occurred because the ajax request was unable to access my server script due to lac ...

javascriptphpajax

Can asynchronous programming lead to memory leakage?

I'm wondering about the potential for memory leaks in asynchronous operations, specifically within Javascript used on both frontend and backend (node.js). When the execute operation is initiated, a delegate named IResponder is instantiated. This dele ...

javascriptnode.jsmemory-leaks

What is the best way to incorporate dynamic elements into a canvas that evolve over time?

Whenever a user interacts with my website by clicking on various parts, I want to display an expanding circle. My idea is to achieve this using a canvas element. Currently, I have successfully implemented the feature where a circle is drawn at the position ...

javascriptjqueryhtmlcanvas

The callback function in a JavaScript setTimeout() loop does not execute properly once the loop has completed

I've been facing a challenge in my recent JavaScript project. I've created two animations named DarkWaves and clearScreen. My goal is to pass a function (such as clearScreen) to DarkWaves, let it run its animation, and then execute the passed fun ...

javascriptcanvascallbacksettimeout

Loop stops after completing one iteration

I am currently working on a program that automatically generates ASCII text based on input numbers. Essentially, when a number is provided as input to the function, it will be displayed as magnified ASCII text. For example, an input of 0123456789 would gen ...

javascriptfor-loopascii

Error: ws variable is not defined

I've integrated puppeteer into my React project using Webpack and Babel. I've included this simple code in my component, but unfortunately, I encountered an error. async goToPage() { const browser = await puppeteer.launch(); const page ...

javascriptreactjswebpackpuppeteer

Tips for embedding svg within ion-content

My application is developed using Angularjs and ionic framework, incorporating cordova for hybrid mobile capabilities. However, when attempting to display svg content received from the backend, the expected diagram does not render properly. This is an exa ...

angularjssvgionic-frameworkionic-view

Is the Android Webview causing input boxes to double up?

Looking to develop an Android application that utilizes a webview for users to input their username/password, but encountering a strange issue where tapping on the input boxes creates duplicates (as shown in the image below). I have implemented the iScroll ...

javascriptandroidhtmlwebviewcordova

HTML5 Canvas Border

Hey Everyone, I've been working on an HTML5 canvas project where I set the canvas width to $(window).width(). Everything was going smoothly until I added a border, which caused a horizontal scroll to appear. Important: I attempted to use the innerWid ...

javascriptjqueryhtmlcsscanvas

What exactly is the function of the NextPage feature in Next.js?

Recently, I began incorporating TypeScript into my Next project. Could someone clarify the purpose of the following code snippets for me? import { NextPage } from 'next'; export const Page: NextPage = () => {} After reviewing the documentation ...

javascriptreactjstypescriptnext.jstsx

Tailwind not properly filling the full width of the screen despite being a fixed element

Can someone assist me in achieving full-width for a fixed element in Tailwind? Check out the modal screenshot here: Modal Screenshot Please disregard the placeholder text as I am still in the testing phase. My React code: import { Dialog, Transition } f ...

javascriptreactjstailwind-css

Finding a specific item in an array and swapping it out with a different object - but how?

Here is an array for reference: [ {color: "blue"}, {color: "red", size: "large"}, {color: "green", size: "medium"} ] My task is to: Locate the object with a color of green Substitute that object with {color: "green", size: "x-large"} ...

javascriptarraysobject