Angularjs单向绑定双向绑定数据

我有一个类似这样的伪代码，其中使用单向绑定运算符（::），我试图查看angular是否在观察变化。所以我不得不将它包含在input标签中。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>

有几件事。

是一次性的，没有单向的结合。当您希望表达式只计算一次而不关注更改时，它很有用。

：in ng模型什么都不做，它仍然会用您放置的值更新作用域，并更新项名称。

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

因此，您将在日志中看到更改，因为值实际上发生了更改，不会更改的是视图。

相关内容

最新更新

热门标签：