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?
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.
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.
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).
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.
::
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With