简体   繁体   English

Angularjs一种方式绑定绑定数据两种方式

[英]Angularjs One way Binding Binds Data Two Way

I have a pseudo code like this where using the one-way-binding operator( :: ) I tried to see if angular is watching for changes. 我有一个这样的伪代码,在其中使用单向绑定运算符( ::我试图查看angular是否正在监视更改。 So I had to include it inside an input tag. 所以我不得不将其包含在input标签中。 the model data inside the input tag should be resolved one way because of :: before it. 输入标记内的model data应以::解析,因为它前面的一种。 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>

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. ng-model中的::不会执行任何操作,它仍将使用您输入的值来更新作用域并更新项目名称。

At the same time the {{ ::item.name}} should remain unchanged, because is one time binding and it won't watch for additional changes. 同时, {{ ::item.name}}应该保持不变,因为它是一次绑定的,因此不会监视其他更改。

So you will see the changes in the log, because the value actually changes, what will not change is the view. 因此,您将在日志中看到更改,因为该值实际上已更改,因此视图将保持不变。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM