The process of AngularJS one-time binding is triggered twice

Why does the one-time binding get called twice?

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.bar = function() {
        console.log('bar'); 
        return 'bar';
    }
});
<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
            <span ng-bind="::bar()"></span>
        </div>
    </body>
</html>

The regular binding also behaves the same way (during first digest).

Answer №1

An important concern has arisen within the angular core framework. For further insights, I recommend checking out this post where a thorough discussion on this matter is provided. The explanation given sheds light on the misconception surrounding one-time bindings and how expression evaluation can potentially be triggered multiple times.

Answer №2

To prevent the binding function from being called at every digest, even with one-time binding, you can use NgInit to call the function only once.

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.foo = function() {
        console.log('foo'); 
        return 'foo';
    }
});
<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
            <span ng-init="::foo()"></span>
        </div>
    </body>
</html>

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 securely transmitting data via a hidden form using the POST method

I have a query that displays records of people, and I want to send the id_Persona using a hidden form through a post function to the idsPersonas.php page. However, when I try to do this, it redirects me to an undefined page. Here is the code snippet: < ...

Activating Ionic6 Stack Modal through JavaScript or TypeScript

Is it possible to trigger the modal using script code instead of a button? I have searched through various examples in the tutorial, but all of them rely on the modal trigger mechanism. <ion-button id="open-modal" expand="block">O ...

Looking to transition from Angular 1.5x to ReactJS, what is the most effective method for conducting A/B tests and exploring different views?

As I transition part of the UI code to ReactJS, I am considering A/B testing my app for instrumentation. I have looked into Intuit's Wasabi as a potential framework but found its setup process in production to be cumbersome. I am seeking an alternativ ...

Error in identifying child element using class name

I need help accessing the element with the class "hs-input" within this structure: <div class = "hbspt-form".......> <form ....class="hs-form stacked"> <div class = "hs_firstname field hs-form-field"...> <div class = ...

"Shopping just got easier with our new drag and drop feature! Simply drag items

I want to develop a Virtual Shopping Cart system. Items will be retrieved from a database. A virtual basket will be available. Users can drag items and drop them into the basket, similar to shopping in a mall. Once the user clicks the save button, the s ...

resolving conflicts between Rails and JavaScript assets

Currently, I am facing an issue with two gems that provide JavaScript assets as they are conflicting with each other. The conflicting gems in question are the lazy_high_charts gem and the bootstrap-wysihtml5-rails gem. Initially, I only had the bootstrap ...

Trigger the angular $exceptionHandler in the Chrome console

Currently, I am customizing the default $exceptionHandler, following a similar approach to what is demonstrated on Angular's official website: https://docs.angularjs.org/api/ng/service/$exceptionHandler. It has been functioning effectively. Nonethele ...

What is the reason for the $watch function in AngularJS triggering console.log to output twice?

Here's the code snippet I've been working on: <!doctype html> <html lang="en-US" ng-app> <!--Head--> <head> <meta charset="UTF-8"> <title>Lesson 5 - ng-show & ng-hide</title> ...

Is there a way for CasperJS to access the underlying PhantomJS objects and references?

Currently, I am in the process of transitioning a script from PhantomJS to CasperJS, and I am curious if Casper offers any references to the Phantom objects it utilizes internally. It is important to note that Phantom provides certain functionalities that ...

Tips for Adding Items to an Infinite Loop

Could you please review This Demo and advise me on how to continuously load items into the ul list in an endless manner? Currently, I have this code set up to display the list but I want it to keep adding new items to the end every time. var item = $(". ...

What is the best method to substitute a comma and period with just a period in a textarea

Creating a text area with auto-replacing characters like straight quotes, double dashes to em dash, and double spaces to single space was simple. However, I'm facing difficulty in adding a script for replacing certain characters: word . as word. wor ...

Using VueJS Computed Property along with Lodash Debounce

I have been encountering a slowdown while filtering through a large array of items based on user input. I decided to implement Lodash debounce to address this issue, but unfortunately, it doesn't seem to be having any effect. Below is the HTML search ...

What is the process to include an image file in a JSON object using PhoneGap?

Having trouble saving an image in JSON. Managed to access the mobile camera with the provided code: var pictureSource; // source of the picture var destinationType; // sets the format of returned value // Wait for PhoneGap to connect with the device / ...

Verify if the element in the array is set to true

Using a simple boolean in a condition is straightforward : var running = true; if(running) {/*do something*/} But what about using a boolean array? Can it be done like this: var running = [false,false,true,false]; if(running[]){/*do something*/} Curren ...

retrieve scanned image information with node.js

Hey, I'm currently dealing with an issue that involves a form containing various types of questions such as boolean and text field answers. The user fills out the form, scans it, then uploads it to a node.js server. The node server will extract answe ...

The $watch() function seems to be failing to properly refresh the $scope

Within my controller, I have a function $scope.remove() that triggers a request to the usercart, which then calls an API. The JSON response from the API includes an object with an array of cart items. Despite using an ng-repeat in the HTML to iterate thro ...

How can I utilize a custom shader in Three.js to fill a png texture and establish transparency?

I am facing an issue with changing the color of a texture that predominantly contains red. Despite my efforts, the texture is completely filling the picture with red. Can someone please help me identify the error? I am also struggling to understand why I ...

Incorporating Subtitles into Videos using NodeJS and the FFMpeg Fluent API

I'm having trouble adding subtitles (srt) to a video stream using Node JS and FFMpeg... Here's what I've tried: var command = ffmpeg(file.createReadStream()) .input("C:\\code.srt").videoCodec('copy') .videoCodec(& ...

What measures can I take to restrict users from adding names that are already in the system?

In the handleSubmit() function, I am attempting to prevent the user from adding an existing user, but it doesn't seem to be functioning properly. Ideally, if the name being added already exists in the persons list, an alert should be triggered. EDIT: ...

How can I effectively organize an Angular2 component library for optimal efficiency?

Looking to develop an Angular2 datepicker component with the intention of releasing it and using it in multiple projects. Wondering about the best way to structure the project for this specific purpose compared to a typical Angular2 project created with an ...