Does the ngIf directive cause a re-evaluation of variables when used with one-time-binding in AngularJS?

I recently had a colleague at work demonstrate a peculiar quirk with one-time binding in Angular.

Scenario:

Imagine having an element with text being bound using one-time binding inside a block that is conditional on ng-if. If you update the value, say by adding some letters, and then change the ng-if condition, the value from the one-time binding gets updated.

HTML:

  <div ng-if="a" class="blue">{{ ::text }}</div>

Is this a bug or an expected behavior?

Check out this example of the issue: http://codepen.io/samot/pen/rLJAdN

javascriptangularjs

Answer №1

When the condition of the ng-if directive switches from false to true, its contents are recreated, triggering the one-time ng-bind directive to reevaluate.

One-time binding simply avoids adding a watch to your expression, but it does not save or cache the result for situations where the directive's content is compiled again.

Therefore, this behavior is expected.

Answer №2

Functions properly given that with the use of the ngIf directive, the code undergoes a complete recompilation. When utilizing ngShow, the behavior changes and the code operates in the manner you would expect from using ngIf. This is due to the fact that the code is simply concealed and not recompiled, thus avoiding the re-evaluation of the variable.

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

Removing the rubber band scrolling feature on Mac computers

While I am pleased with the overall look of my website, I have noticed that users with trackpads on Macs experience distortion when accessing it. I am seeking assistance in addressing this issue, particularly in disabling or minimizing the impact of trackp ...

javascriptjqueryhtmlcssmacos

Preventing page re-rendering with redux when a condition is not met

I am currently working on a page that features a question paper with multiple options and a button to navigate to the next question. import Grid from "@material-ui/core/Grid"; import Typography from "@material-ui/core/Typography"; import React, { useEffec ...

javascriptreactjsredux

Ways to achieve combined outcomes using ng-repeat

Check out this plunker. <div ng-repeat="subCategory in subCategorys | filter:{tags:tag}:true | orderBy:'id'"> {{subCategory.id}} {{subCategory.name}} {{subCategory.tags}} <br/><br/> The detailed information of ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat

What is the best way to extend the width of an element within a Bootstrap column beyond the column itself?

Apologies for any language errors, but I have a query regarding Bootstrap. I am currently working on making a website responsive and I have a row with 4 columns set up like this: The "seeMore" div is initially hidden and on clicking the boxToggle element ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it necessary to specify a data type for the response when making an AJAX POST request?

After carefully reviewing my code, I have ensured that all the variables in my JavaScript match and are properly set up. Additionally, I have confirmed that all the variables in my data array for my AJAX request correspond correctly to my $_POST['var& ...

javascriptphpjqueryajax

Glitch Uncovered in Excel Spreadsheet I Exported

I have a situation where I am working with an HTML table that includes both text and radio buttons. The issue arises when I attempt to export the table data along with the selected radio button values to Excel using the 'Export to Excel' button. ...

javascriptjqueryhtmlcssexcel

Trouble Logging In: User Login Issue with SailsJS and PassportJS Plugin (sails-generate-auth)

I'm currently facing an issue with user authentication in my SailsJS app using PassportJS. I followed a tutorial on setting up authentication in SailsJS using sails-generate-auth, which can be found here. The POST request seems to be routed correctl ...

javascriptnode.jsauthenticationsails.js

When converting JavaScript to PHP using AJAX, PHP retrieves an empty array

I am attempting to send a file from JavaScript to PHP using AJAX, but PHP is receiving an empty array. Currently, I am working on creating a web page through which I can pass a file to PHP in order for it to access and save information from the file into ...

javascriptphpajax

What is the best way to retrieve the information stored in an object?

let items = { 1001: {item: 'Chocolates', price: 10, quantity: 10}, 1002: {item: 'Biscuits', price: 10, quantity: 10}, 1003: {item: 'Bread', price: 20, quantity: 5}, 1004: {item: 'Milk', price: 25, quantity: 5}, 1005: ...

javascripthtml

How can you effectively utilize Selenium to web scrape a webpage featuring collapsible fields?

Have you checked out this website - ? I'm currently working on extracting fixture data from it, such as competition names, team names, and dates. Although I have a scraping solution in place, the challenge lies in dealing with collapsible competition ...

javascriptpythonselenium-webdriverweb-scraping

Encountering a 404 error in an AngularJS app within Cordova on Android

Currently, I am working on an android application using Cordova and AngularJS (front-end framework OnsenUI). Below is the code snippet for my GET request to retrieve data from the server: $http.get(url+"getlotterylist").then(function(msg){ $scope. ...

javascriptandroidangularjscordovaonsen-ui

Error encountered in IONIC with SQLite: "Unable to access 'openDatabase' method"

Hello, I am a beginner with IONIC and I could use some assistance with using ngCordova. I have successfully created a database on my app.js file. However, whenever I try to access the database on my controller, I keep encountering this error message: "Type ...

angularjscordovaionic-framework

Failure of app script to retrieve data from an external spreadsheet

In an attempt to consolidate data, this program aims to transfer information from one spreadsheet to another. The process involves retrieving all files within a designated folder (all of which are spreadsheets), extracting values from a specific range, and ...

javascriptgoogle-apps-scriptgoogle-sheets

Using a combination of stringify, regular expressions, and parsing to manipulate objects

As I review code for a significant pull request from a new developer, I notice their unconventional approach to editing javascript objects. They utilize JSON.stringify(), followed by string.replace() on the resulting string to make updates to both keys a ...

javascript

TypeScript is unable to recognize files with the extension *.vue

Can someone assist me with an issue I'm facing in Vue where it's not detecting my Single File Components? Error message: ERROR in ./src/App.vue (./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/Ap ...

javascripttypescriptwebpackvue.js

Token does not function properly on Fetch request sent to PHP script

I have a pair of files: one is revealing a session token, while the other is responding to a javascript fetch. The first file goes like this: <?php session_start(); unset($_SESSION['sessionToken']); $_SESSION['sessionToken'] = vsprin ...

javascriptphpajaxfetch

JavaScript-Based Header Features Similar to Excel

Currently, I am in the process of developing a function that generates a sequence of strings similar to Excel headers. For those who may not be familiar with Excel, the sequence goes like this: A,B,...,Z,AA,...,AZ,BA,...,ZZ,AAA,...,etc. Here is the code ...

javascriptstring

Using Javascript to enable drag and drop functionality

After attempting to use a guide for creating drag and drop features, I encountered an issue. I followed the steps outlined at Despite the detailed instructions in the guide, I cannot seem to get the functionality to work. Is there a mistake in my code? I ...

javascriptasp.net

What strategies can be employed to streamline the code provided?

Can someone help simplify this JavaScript code for me? I would really appreciate it. Thank you! $(function() { $("#show1").click(function() { $("#showmore1").toggle(); }) $("#show2").click(function() { $("#showmore2").toggle(); ...

javascriptjquery

Tips for preventing page breaks (when printing or saving as a PDF) in lengthy HTML tables

Here is the link to a single HTML file (including style and scripts): FQ.html The problem I'm facing can be seen in this image: https://i.sstatic.net/Nr4BZ.png I've tried several solutions, the latest of which involves the following CSS... @me ...

javascripthtmlcsspdfpage-break