What is the reason for the malfunction of native one-time binding when using the `::` expression in Angular version 1.3.5?

I am having an issue with AngularJS's one-time binding feature using the :: expression. Despite my code setup, the values are still changing. I must be missing something crucial here.

Consider this controller:

$scope.name = "Some Name";
$scope.changeName = function() {
    $scope.name = "Another Name";
}

And this HTML:

<h1>{{::name}}</h1>
<button ng-click="changeName()">click me</button>

The value of the name model is not remaining static as expected. Any suggestions or help on where I might be going wrong?

javascriptangularjs

Answer №1

UPDATE: (excerpt from discussions)

How to Uninstall the AngularJS Batarang Extension in Chrome

PREVIOUS RESPONSE: (obsolete)

Seems to be effective for me. 

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

app.controller('ctrl', function($scope) {

  $scope.name = "Some Name";
  $scope.changeName = function() {
    $scope.name = "Another Name";
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <h1>{{::name}}</h1>
  <button ng-click="changeName()">click me</button>
  <p> {{name}} </p>
</div>

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

Getting the parameter route value from Laravel and passing it to Ajax

Need help with returning the parameter of a Laravel route to an AJAX response. Here is the relevant code: public function getPermissions(Request $request) { //$v = request()->route()->parameters('profile'); $v = request()-& ...

javascriptphpajaxlaravel

Browsing through items within arrays to evaluate their values

I am facing an issue with two arrays that consist of objects. The first array contains restaurant objects with attributes such as name and averagePrice, while the second array has price objects (cheap, medium, expensive) with properties like label, lowEnd, ...

javascript

Understanding how to utilize jQuery or prototype to interpret onclick event containing "setLocation(...)" can enhance the functionality

I am dealing with a specific tag: <button onclick="setLocation('http://mysite.com/checkout/cart/add/product/17/')" /> My goal is to trigger an ajax request when the button is clicked. I want to extract the URL segment "product/17" and app ...

javascriptjqueryprototype

Top way to include an HTML and javascript file in an Ext.Panel within Sencha Touch

My main goal is to efficiently include external HTML files and display them on an Ext.Panel in Sencha touch 2.3 by creating a wrapper module for the HTML file that can be instantiated using xtype, with an external Javascript file for event handling. Updat ...

javascripthtmlextjssencha-touchsencha-touch-2

Attaching a buoyant div to the precise location of a different element

I have a unordered list (ul) with individual list items (li) that are displayed within a scrollable container. This means that only 8 list items are visible at a time, but you can scroll through them to see the others. Each list item (li) has an "edit" b ...

javascriptjqueryhtmlcss

Determine the output based on the data received from the ajax post request

I am seeking a way to validate my form based on the data returned. Currently, the validation only returns false if the entire post function is false. Is there a solution to differentiate how it is returned depending on which condition is met? This is my ...

javascriptjqueryajax

Change the name of a file to a name chosen by the user while uploading it to an

I'm a beginner when it comes to node.js and I'm facing an issue that I couldn't find a solution for despite looking into various related topics. My problem involves using Node.js on the server side to upload a file and rename it based on a ...

javascriptnode.jsexpressasynchronous

Why is it that my React app is on a different port than the Express server that it listens to?

As I'm working on my React app, it currently runs on the default port http://localhost:3000/. However, when I need to communicate data from the client to the server, I have to listen on a different port. Take a look at the below code snippet: const ex ...

javascriptnode.jsexpressport

"Is there a way to retrieve the CSS of all elements on a webpage by providing a URL using

Currently, I am in the process of creating a script that can crawl through all links provided with a site's URL and verify if the font used on each page is helvetica. Below is the code snippet I have put together (partially obtained online). var requ ...

javascriptnode.jscheerio

Pressing the reset button on a basic calculator

I am experiencing an issue with my calculator. It works fine initially, but after using the reset button, it stops functioning properly. Currently, I only have the multiplication set up as I debug this problem. I am new to JavaScript and would appreciate a ...

javascriptjqueryhtmlcss

Setting the default dropdown option in Angular

For my latest question, I decided to utilize ng-init. However, upon loading the page, I noticed that there is a blank default option. When I click and select another option, the blank option disappears. How can I remove this initial blank option? Here is ...

javascriptangularjs

Inheritance best practices for node.js applications

In C#, the concept of inheritance can be easily demonstrated through classes like Animal and Dog. class Animal { string name; public Animal() { } } class Dog : Animal { public Dog() : base() { this.name = "Dog"; } } When working ...

javascriptnode.jsinheritance

The value of req.session.returnTo is not defined

I have implemented passport for user authentication using discord oauth2. I want the users to be redirected back to the original page they came from instead of being directed to the home page or a dashboard. Even though I tried saving the URL in the sessi ...

javascriptexpressoauth-2.0passport.jsexpress-session

React - Error: you have a syntax problem because there is an unexpected token <

I am working on a project using Express, pg, and react. However, I have encountered some issues with React. Here is the directory of my project index.js var express = require('express'); var server = express(); var path = require('path&ap ...

javascriptreactjsexpresspg

Retrieve information by utilizing query string parameters in Next.js

When using my getInitialProps function, I make two requests to fetch data. Now, I want to add a condition to make an additional request if the query params key is for a legal person. For example, if the URL is https://www.example.com.br/?legal-person, I n ...

javascriptnext.jsquery-string

Conceal dynamically generated div elements created with ngIf

I am currently working on initializing this div using ngOnInit in Angular ngOnInit(): void { let optTemp = ''; for (let data of arrOption) { optTemp = optTemp + '<option>' + data.trim() + '</option> ...

javascriptangulartypescript

Mongoose failing to retrieve data from MongoDB

In my code, I am utilizing data from the database: Assignment and the Collection: todolist. The code is designed to interact with MongoDB in order to add, delete, or list the JSON in the collection. To properly explain the issue, I will first showcase the ...

javascriptnode.jsmongodbmongoose

Koa and Stripe are patiently holding off on displaying the page

My current setup involves using koa and stripe for processing a one-time payment. Although the functionality is there, I'm facing an issue where the page renders before the 'data' assignment takes place. This results in the 'id' sh ...

javascriptnode.jsstripe-paymentskoa

Obtain JSX content from a React Component that has been imported

As part of our library documentation efforts, I am looking to convert a React Component function into JSX format. To illustrate, let's consider a rendered Button component and showcase the code used to create it. One approach could be to simply read ...

javascriptreactjsbabeljsjsx

Struggling with TypeScript errors due to React.HTMLProps for HTMLAnchorElement

When trying to extend a React component with React.HTMLProps without explicitly defining onClick in the attribute list, ESLint complains when passing onClick as an attribute while using the component. Here's an example of the code: The React componen ...

javascriptreactjstypescript