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

【问题标题】：Angularjs One way Binding Binds Data Two WayAngularjs 一种方式绑定两种方式绑定数据
【发布时间】：2016-02-27 21:28:08
【问题描述】：

我有一个像这样的伪代码，其中使用单向绑定运算符 (::) 我试图查看 angular 是否正在监视更改。所以我不得不将它包含在input 标签中。输入标签内的model data 应该以一种方式解析，因为它之前有::。但是，如果我对输入进行更改并单击按钮以查看更改，它会反映日志中的更改。但它不应该关注这些变化。

<!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>

【问题讨论】：

标签： angularjs data-binding model-binding oneway

【解决方案1】：

有几件事。

是一次，没有一种方式结合。当您希望表达式只被计算一次并且不监视更改时很有用。

ng-model 中的 :: 什么都不做，它仍然会使用您输入的值更新范围并更新项目名称。

同时{{ ::item.name}} 应该保持不变，因为它是一次性绑定的，它不会监视其他更改。

所以你会在日志中看到变化，因为值实际上是变化的，不会变化的是视图。

【讨论】：

来自 angularjs 文档“一次性绑定表达式的主要目的是提供一种方法来创建绑定，一旦绑定稳定，该绑定就会被取消注册并释放资源。”现在，如果 ng-model 正在反映更改，那么它必须在监视更改（这是我想要释放的开销）。因为在我实际的 AngularJS 代码中有许多模板，其中数据是从外部 API 获取并绑定到模板并且它不会改变。如果在内部它仍然监视更改，那么它如何释放自己的开销？
当你想显示不会超时变化的数据时，开销应该是添加一次绑定，所以你只需要渲染信息然后停止观看，让摘要周期更短。但是如果你添加一个输入是因为你想绑定值，如果不是为什么要使用和输入呢？
我不想使用输入，因为我已经在上面代码示例的注释代码中说过。我包含输入的唯一原因是找出它是否正在监视更改。因此，从您的解释中我了解到，如果我使用input，那么它会监视更改并且存在开销。否则，如果我只是使用模板标记，那么数据会在视图中呈现一次，然后它会停止监视更改。我理解对了吗？
没错，输入总是绑定到 ng-model，但视图中的 item.name 显示它只会触发和更新一次。如果您使用 ng-if、ng-show 等，也一样。它只会评估表达式一次，然后停止观看，这样您就会得到好处。