Angularjs 指令创建手表答案

【问题标题】：Angularjs directive creates watchesAngularjs 指令创建手表
【发布时间】：2015-05-12 13:56:33
【问题描述】：

我有一个角度指令，它创建一个数字微调器 (<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 会创建两个手表，一个用于绑定的每一端。有什么办法可以解决这个问题吗？

【问题讨论】：

如何以编程方式设置属性：template: '', link: function($scope, $element, $attrs) { $scope.value = parseFloat($scope.min); $element.attr('min',$scope.min).attr('max',$scope.max) }
这确实从指令模板中消除了手表，但这可以通过一次性绑定完成。但是我真的需要消除使用指令引起的手表。
好吧，我想这是你的两个选择。

标签： angularjs watch

【解决方案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>

【讨论】：