角度绑定到只读属性答案

【问题标题】：Angular binding to a read-only property角度绑定到只读属性
【发布时间】：2015-10-10 06:52:41
【问题描述】：

如何在 Angular 中以高效的方式强制执行只读属性？

控制器：

function MyCtrl($scope) {
  $scope.clickCount = 0;
  $scope.incrementCount = function() {
    $scope.clickCount = $scope.clickCount + 1;
  }
}

查看：

<div ng-controller="MyCtrl">
  Clicked {{clickCount}} times
  <button ng-click="incrementCount()">Doober</button>
  <input type="text" ng-model="clickCount" /><!-- how do I prevent this -->
</div>

我知道我可以将 clickCount 设为 getter 函数 getClickCount()，但这会降低性能吗，因为 Angular 必须在每个摘要循环中调用此函数？

http://jsfiddle.net/zb05om1k/

更新

我正在寻找一种方法来明确不应该直接更改只读属性，而是通过提供的函数来更改。此外，防止视图直接更改属性。

【问题讨论】：

你想完成什么？只是显示 clickCount 的值而不允许用户编辑它？
ngReadonly 怎么样？ docs.angularjs.org/api/ng/directive/ngReadonly
为什么你没有想到 angular 1.3+ 的 bindonce 指令
我正在控制器中寻找一种方法，以明确 clickCount 不应直接更改，而应通过函数影响。
你量过吗？如果一个简单的函数真的会影响性能，那么这个函数将是你最小的问题。此外，您只需将输入设置为只读。

标签： angularjs

【解决方案1】：

使用角度指令ng-readonly，它的工作原理就像听起来一样......

https://docs.angularjs.org/api/ng/directive/ngReadonly

【讨论】：

谢谢。我正在寻找一种防止视图直接更改值并通过提供的函数影响它的方法。我知道这个特殊的例子是人为的，但我希望它很简单。

【解决方案2】：

在您的示例中，incrementCount() 被调用一次，执行时间可以忽略不计，然后 Angular 开始一个摘要循环并重建 DOM，这无论如何都会发生。

作为一般规则，您不需要优化时间受用户输入限制的代码。您的示例代码对我来说看起来不错。

如果您真的想通过将属性设为只读来强制执行关注点分离，您可以使用Object.defineProperty 来防止写入：

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function MyCtrl($scope) {
    var clickCount = 0; // Private variable

    Object.defineProperty($scope, 'clickCount', {
        set: function() { // Prevent views from editing data
            throw new Error('Operation not supported');
        },
        get: function() {
            return clickCount;
        }
    });

    $scope.incrementCount = function() {
        clickCount++;
    }
});

当您将数据放入输入时，控制器会抛出错误，并且更改会立即在 DOM 中擦除。

小提琴：http://jsfiddle.net/acbabis/5bq5oeq3/

【讨论】：