Angularjs One way Binding Binds Data Two Way

Question

I have a pseudo code like this where using the one-way-binding operator(::) I tried to see if angular is watching for changes. So I had to include it inside an input tag. the model data inside the input tag should be resolved one way because of :: before it. However if I make changes to the input and click the button to see the changes it reflects the changes in the log. But it should not watch for the changes.

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-animate.js"></script>
</head>
<body class="container" ng-controller="ItemsController">
    <ul ng-repeat="item in ::items">
        <li>
            <!-- in actual code the input will not be included -->
            <input type="text" ng-model="::item.name"> {{ ::item.name }}
            <!-- actual code -->
            <!-- {{ ::item.name }} -->
        </li>
    </ul>
    <button type="btn" ng-click="click()">Button</button>

    <script>
        angular.module('app', [])
        .controller('ItemsController', function ($scope) {
            $scope.items = [
                {name: 'item 1'},
                {name: 'item 2'},
                {name: 'item 3'}
            ];

            $scope.click = function () {
                for (var obj of $scope.items) {
                    console.log(obj.name);
                }
            };
        })
    </script>
</body>
</html>

Leandro Zubrezki · Accepted Answer · 2015-11-25 07:31:13Z

2

A couple of things.

Is one time, no one way bonding. Is useful when you want an expression to be evaluated only once and not watching for changes.

The :: in ng-model is doing nothing, it will still update the scope with the value that you put and update the item name.

At the same time the {{ ::item.name}} should remain unchanged, because is one time binding and it won't watch for additional changes.

So you will see the changes in the log, because the value actually changes, what will not change is the view.

answered Nov 25, 2015 at 7:31

Leandro Zubrezki

1,1609 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nasif Md. Tanjim Over a year ago

From the angularjs doc "The main purpose of one-time binding expression is to provide a way to create a binding that gets deregistered and frees up resources once the binding is stabilized." Now if ng-model is reflecting the changes, then it must be watching for the changes (which is the overhead that I want to free itself of). Because in my actual AngularJS code there are many templates where data is fetched from external API and bound to the template and it doesn't change. If internally it still watches for the changes then how come it frees itself of the overhead?

Leandro Zubrezki Over a year ago

The overhead should be done adding one time binding when you want to show data that won't change overtime, so you just need to render the information and then stop watching and make the digest cycle shorter. But if you add an input is because you want to bind the value, if not why to use and input?

Nasif Md. Tanjim Over a year ago

I do not want to use the input as I have already said it in my commented code in the above code example. The only reason I included the input is to find out if it is watching for changes or not. So, from your explanation I understand that if I use input then it watches for changes and there is the overhead. Otherwise if I simply use templating markup then data is rendered in the view once and after that it stops watching for changes. Do I understand it right?

Leandro Zubrezki Over a year ago

That's correct, the input will always bind to the ng-model, but the item.name in the view for displaying it will only fire and update once. The same if you use ng-if, ng-show, etc. it will evaluate the expression only once and then stop watching so you will get the benefits.

Collectives™ on Stack Overflow

Angularjs One way Binding Binds Data Two Way

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related