Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does :: mean in angularJS

Tags:

angularjs

I have seen a syntax like

<a href={{ ::something}}>some other thing</a> 

What is that double colon for? What happens if it is removed?

like image 252
Maryam Avatar asked Dec 10 '15 11:12

Maryam


People also ask

What does double colon mean in AngularJS?

With the new one-time binding syntax, we introduce a double-colon before our value: <h1>{{ ::title }}</h1> Angular processes the DOM as usual and once the value has been resolved it removes the particular property from its internal $$watchers list.

What are expressions in AngularJS?

Expressions are used to bind application data to HTML. Expressions are written inside double curly braces such as in {{ expression}}. Expressions behave similar to ngbind directives. AngularJS expressions are pure JavaScript expressions and output the data where they are used.

What does $scope mean in AngularJS?

The $scope in an AngularJS is a built-in object, which contains application data and methods. You can create properties to a $scope object inside a controller function and assign a value or function to it. The $scope is glue between a controller and view (HTML).

What is use of * in Angular?

It's called Safe Navigation Operator which can be used to prevent Angular from throwing errors, when trying to access object properties of an object that don't exist. Here it is, protecting against a view render failure if the header is null.


2 Answers

:: is used for one-time binding. The expression will stop recalculating once they are stable, i.e. after the first digest.

So any updates made to something will not be visible.

like image 183
Vivek Avatar answered Oct 05 '22 14:10

Vivek


It's used to bind model from your controller to view only. It will not update your controller model if you change this from your view. It means it's used to achieve one time binding.

Example

angular.module("myApp", []).controller('ctrl', ['$scope', function($scope) {  $scope.label = 'Some text';  }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>  <html ng-app="myApp">    <body ng-controller="ctrl">        <div>{{::label}}</div> // this will print `Some text` on load      <div>{{label}}</div> // this will too print `Some text` on load      <br />      <button ng-click="label='IUpdateLabelFromHtml'">Change label</button>    </body>   </html>

When we change label meaning when we click on Change label link, it will update only second text i.e. binded without :: operator.

Read this for more details One way binding

like image 38
Jay Shukla Avatar answered Oct 05 '22 14:10

Jay Shukla