角绑定到只读属性。

Question

如何以角的形式强制执行只读属性？

主计长：

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()，但是这会不会降低性能，因为角将不得不在每个消化周期调用这个函数吗？

http://jsfiddle.net/zb05om1k/

更新

我正在寻找一种方法，清楚地表明，只读属性不应直接更改，而应通过提供的函数进行更改。此外，防止视图直接更改属性。

Answer 1

在您的示例中，incrementCount()被调用一次，执行所需的时间可以忽略不计，然后角开始一个摘要周期，然后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/

Answer 2

使用角指令ng-readonly，它的工作就像它的声音.

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