Click event triggers dynamic function call

Question

Click event triggers dynamic function call

Is it possible to have different functions for ng-click depending on the loaded controller page?

<a ng-click="removeEvent(event)" class="top_menu_link"> REMOVE</a>

For instance, if I want the same button to trigger a remove action but on different models like event, person, etc. And this button is located outside the ng-view.

My current solution involves calling a function with a parameter like removeItem('person') and then having a series of if-else statements. I am curious if there is an alternative approach.

javascript angularjs angularjs-ng-click

Answer 1

Answer №1

Here is a way to accomplish this:

<a ng-click="fn.deleteEvent(event)" class="menu_link"> DELETE</a>

In the controller where this link is located, create a function fn:

$scope.fn = {};

In each specific page (/sections), define the deleteEvent function:

$scope.fn.deleteEvent = function(event){
    // Perform actions specific to this section
};

By assigning the function to an object that already exists in the parent scope, you can easily modify the function without losing reference to it in the parent scope.

Note: You might want to hide the link if the function is not defined:

<a ng-if="fn.deleteEvent" ng-click="fn.deleteEvent(event)" class="menu_link"> DELETE</a>

Answer 2

Here is a way to accomplish this:

<a ng-click="fn.deleteEvent(event)" class="menu_link"> DELETE</a>

In the controller where this link is located, create a function fn:

$scope.fn = {};

In each specific page (/sections), define the deleteEvent function:

$scope.fn.deleteEvent = function(event){
    // Perform actions specific to this section
};

By assigning the function to an object that already exists in the parent scope, you can easily modify the function without losing reference to it in the parent scope.

Note: You might want to hide the link if the function is not defined:

<a ng-if="fn.deleteEvent" ng-click="fn.deleteEvent(event)" class="menu_link"> DELETE</a>

Click event triggers dynamic function call

Answer №1

Similar questions

difficulty associated with using a package I uploaded to npm

Developing JavaScript code for preventing blocking

How can I align two inner boxes vertically in the most efficient manner?

Determine the full location information with the help of Google Maps SDK without the need

Issue with Swiper JS: The buttons on pages three and beyond are unresponsive

Creating a JavaScript function for a custom timed traffic light sequence

Exploring the (*ngFor) Directive to Iterate Through an [object Object]

What is the best way to obtain the chosen value or index from a Vue select element?

Merging Angular with jQuery: Organizing jQuery into a distinct file leads to the error message 'Property 'top' cannot be read because it is undefined.'

Establish a global variable within a TypeScript file

Using nodeJS's util module to format and pass an array

Trouble with displaying events on Angular UI-Calendar

Unlocking the power of RXJS by de-nesting subscriptions

"Discovering the referring page URL in Next.js: A Step-by-Step

Working with JSON in AJAX with Javascript and C# to handle array data

A helpful guide on passing a component as a prop to a child class and incorporating it within the child component along with additional props

How to declare WinJS.xhr as a global variable in a Windows 8 Metro app

Guide to implementing onhashchange with dynamic elements

Ways to align backend timer with mobile application

The timeline shows the movement of the jQuery object