Angularjs 指令创建手表

Question

我有一个 angular 指令，它创建一个数字微调器 (<input type="number>)，可以将最小值和最大值传递给它。

但是我注意到 angular 将为传递给指令的 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 指令创建手表

Angularjs directive creates watches

angularjs

watch

更新