Question

我有一个角度指令，可以创建一个数字微调器（<input type="number>），可以将其传递到最小值和最大值。

但是我注意到，角度会为传递给指令的min和max值创建一个监视，以及min和max的使用位置模板。这是一个问题，因为实际上会有更多的参数可以传入，而且这是一个很大的ng-repeat。

该指令如下：

.directive('inputNumber', function () {
    return {
        restrict: 'E',
        scope:{
            min: '@',
            max: '@'
        },
        template: '<input type="number" min="{{min}}" max="{{max}}" ng-model="value"/>',
        link: function($scope, $element, $attrs) {
            $scope.value = parseFloat($scope.min);
        }
    }
})

并且如此使用：

<input-number data-min="{{min}}" data-max="{{max}}"></input-number>

我不需要手表，因为值一旦设置就永远不会改变，所以我可以在我的模板中使用一次性绑定：

template: '<input type="number" min="{{::min}}" max="{{::max}}" ng-model="value"/>'

一次性绑定也可用于指令本身。

然而，这意味着所有开发人员都需要向他们传授这些知识，以便他们知道使用这种方法。因此，当使用该指令时，无论如何都要避免一次性绑定，但仍然可以获得它的好处吗？

JSFiddle without one-time bindings

JSFiddle with one-time bindings

更新

似乎如果你使用双向绑定，那么angular会创建两个手表，一个用于绑定的每一端。有什么方法可以解决这个问题吗？

Answer 1

您可以使用$parse或scope.$eval手动获取插值一次，并在模板中使用一次性绑定（{{::var}}）：

.directive('inputNumber', function ($parse) {
   scope: {},
   template: '<input type="number" min="{{::min}}" max="{{::max}}" ng-model="value"/>',
   link: function($scope, $element, $attrs){
     $scope.min = $parse($attrs.min)($scope.$parent);
     $scope.max = $parse($attrs.max)($scope.$parent);
     // etc...
   }
}

用法是：

<input-number data-min="min" data-max="max"></input-number>

Angularjs指令创建手表

更新

1 个答案: