What causes additional method calls in an element's attributes to be triggered when using ng-click in AngularJS?

Currently delving into the world of angularJS, I find myself perplexed by the scenario where multiple methods are triggered even though only one is explicitly called. The line in question looks like this:

<li  ng-repeat="i in names" style="position: relative; top:{{mar(i)}}px; z-index:{{i}}; background-color: orange;" ng-click="clicker(i, $index)">{{i + " " + $index}}</li>

Essentially, I am faced with two "calls" within this line:

  1. The calculation for the top offset within the style attribute.
  2. The function that executes upon clicking the element using ng-click.

Upon clicking the element, both the mar(i) function and the ng-click function are triggered simultaneously.

My aim is to gain a clearer understanding of why this phenomenon occurs. For a hands-on experience, feel free to check out my plunk here.

Answer №1

The reason behind this behavior is due to the fact that you are linking to a function using the syntax {{mar(i)}}. This implies that whenever a $digest cycle occurs, like after an ng-click event, the function must be executed in order to update the view.

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

The voracious nature of the `+` and `*` operators

There is a variable, const input = "B123213"; When using the following regex pattern, const reg = /\d+/; and executing String match function, console.log(input.match(reg)); The output returned is 123213, illustrating that the expression is gree ...

Using wildcard in Angular app for MQTT observation

My curiosity lies in MQTT wildcards and how they function, specifically while utilizing the mosqitto broker. Let's say I have around 1-2k topics. In my frontend, I am observing them with a single-level wildcard using ngx-mqtt. Will there be a separat ...

Guide for updating an Angular 1.x directive with "replace: true" configuration

Question Summary: I am currently utilizing a third-party directive that has been configured with replace: true. My goal is to recompile the directive each time a user clicks a button. I have attempted several methods, but have not had any success so far. ...

Whenever I make a move in the Towers of Hanoi javascript game, I always ensure that both towers are updated simultaneously

As I explore the Towers of Hanoi puzzle using JavaScript constructors and prototypes, I encounter issues with my current implementation. Whenever I move a disc from one tower to another, an unintended duplicate appears in a different tower. Additionally, a ...

Determine the year immediately preceding the current date

I'm looking to delete records from MongoDB using JavaScript by passing a query. The dates in my database are in the format: "12 Feb 2019 06:45:34 GMT" and I need to retrieve the dates from 1 year ago for deletion. How can I achieve this? var d = n ...

Using jQuery, you can easily apply a new class to a div when it is

I'm currently facing an issue with adding a class of "active" to a div upon clicking it using jQuery. My goal is to apply the css class of active in order to give the button a distinct color (or the hover effect.) Unfortunately, I have been unsuccess ...

What is the best way to access the display property of a DOM element?

<html> <style type="text/css"> a { display: none; } </style> <body> <p id="p"> a paragraph </p> <a href="http://www.google.com" id="a">google</a> &l ...

Looking for assistance with navigating through this URL using Python (requests, beautifulsoup, or selenium) or Javascript (node js, puppeteer)?

While attempting to gather data, I encountered an interesting pagination challenge on the following URL: My expertise in Web Scraping was put to the test as this website implemented a unique JavaScript-driven pagination. For the initial 5 pages, it simply ...

What is the process for inserting HTML content into the body of an iframe?

Is there a way to insert HTML content into the body of an iframe instead of using the src attribute to call a page's URL? I am looking for a code that is compatible with all browsers and works perfectly. ...

Fluctuate the window.location with jQuery or javascript

My goal is to create a functionality where clicking an image will toggle the window.location url between '#' and '#footer'. The current code I have for this is: <script> function clickarrow(){ var rd=Math.floor(Math.random() ...

Tips on adding custom fonts for text geometry in three.js

Currently, I am delving into the realm of three.js to create text geometry, although my expertise in JavaScript is fairly limited. Initially, I attempted to utilize my custom JSON font, which resulted in the same error encountered when using fonts from th ...

Angular Grid Event Triggered by Checkbox Selection in the Header

I am currently utilizing ng-grid from AngularUI-Grid, where I have implemented a checkbox for row selection. Interestingly, it also provides a checkbox in the header. If a user selects the checkbox in the header, I need some event or method to trigger in ...

What is the best way to execute an API function call within an ng-repeat loop?

I'm encountering an issue with a scope function in my controller that calls an API to retrieve data from a database. This scope function is being used within an ng-repeat loop. However, when I try running the application, it becomes unresponsive. Whil ...

Convert epoch time to HHMM format using JavaScript

I have a specific variable that stores epoch time data. My goal is to showcase the time information in HHMM format. Below you can find the code I am currently using; function convertEpochTimeToDateObj(epoch_time) { var utcSeconds = epoch_time; va ...

Issue with an external library in Angular 2

After generating my Angular 2 library using the yeoman generator and adding it to my main Angular project, I encountered errors when running the app in production mode. The specific errors include: WARNING in ./src/$$_gendir/app/services/main/main.compone ...

Tutorial on Removing and Re-Adding HTML Elements

Currently, I am utilizing Jquery to temporarily remove an element from the DOM. This specific element consists of an HTML5 video element. However, upon re-adding this element back into the DOM, the video is unable to play and the element appears as blank o ...

jQuery does not support animations for sliding up or down

I'm struggling to conceal a navigation element once the top of the #preFooter section is scrolled to. In order to make the nav element mobile-friendly, I have designed both the .tab-wrap and .tab-wrap-mobile. To enable these elements to slide away w ...

When the program is executed, immediately use .trigger('click')

There is a spelling game that features a grid filled with hidden words. The objective of the game is to spell out these words by clicking on the letters of the alphabet, aided by hints such as images and sounds. Players are given the word they need to spe ...

Struggling to create a complete Absolute URL

www.baxter.com source page reveals that many of the href links start with the word baxter, for example: href="/baxter/corporate.page?">About Baxter< Attempting to construct an absolute URL by combining the base url, www.baxter.com, with the relativ ...

Managing asynchronous tasks that do not save their outcomes within the application state

Upon discovering a requirement within a vanilla JS webapp that necessitates a single JSON "definitions" object for rendering, I realized that the definitions are to be loaded through an HTTP request at the start, then read, parsed, and passed down to anoth ...