如何从指令链接函数更新 AngularJS 模型？

Question

我想要实现的是为输入字段添加额外的界面，以便能够通过单击 + 和 - 按钮来增加和减少其中的数值。

（本质上它是 chrome 上的 input[type=number] 字段，但我希望它能够跨浏览器兼容，并且还可以完全控制所有浏览器的呈现）。

查看代码：

<input data-ng-model="session.amountChosen" type="text" min="1" class="form-control input-small" data-number-input>

指令代码：

app.directive('numberInput', function() {
return {
    require: 'ngModel',
    scope: true,
    link: function(scope, elm, attrs, ctrl) {

        var currValue = parseInt(scope.$eval(attrs.ngModel)),
            minValue = attrs.min || 0,
            maxValue = attrs.max || Infinity,
            newValue;

        //puts a wrap around the input and adds + and - buttons
        elm.wrap('<div class="number-input-wrap"></div>').parent().append('<div class="number-input-controls"><a href="#" class="btn btn-xs btn-pluimen">+</a><a href="#" class="btn btn-xs btn-pluimen">-</a></div>');

        //finds the buttons ands binds a click event to them where the model increase/decrease should happen
        elm.parent().find('a').bind('click',function(e){

            if(this.text=='+' && currValue<maxValue) {
                newValue = currValue+1;    
            } else if (this.text=='-' && currValue>minValue) {
                newValue = currValue-1;    
            }

            scope.$apply(function(){
                scope.ngModel = newValue;
            });

            e.preventDefault();
        });


    }
  };

})

这可以通过scope.$eval(attrs.ngModel)获取当前模型值，但是设置新值失败。

事后编辑：这是现在可以工作的代码（以防你不想看到这个问题的解决方案）

app.directive('numberInput', function() {
  return {
    require: 'ngModel',
    scope: true,
    link: function(scope, elm, attrs, ctrl) {

        var minValue = attrs.min || 0,
            maxValue = attrs.max || Infinity;

        elm.wrap('<div class="number-input-wrap"></div>').parent().append('<div class="number-input-controls"><a href="#" class="btn btn-xs btn-pluimen">+</a><a href="#" class="btn btn-xs btn-pluimen">-</a></div>');
        elm.parent().find('a').bind('click',function(e){

            var currValue = parseInt(scope.$eval(attrs.ngModel)),
                newValue = currValue;

            if(this.text=='+' && currValue<maxValue) {
                newValue = currValue+1;    
            } else if (this.text=='-' && currValue>minValue) {
                newValue = currValue-1;    
            }

            scope.$eval(attrs.ngModel + "=" + newValue);
            scope.$apply();            

            e.preventDefault();
        });
    }
  };
})

Answer 1

应该使用ngModelController 方法而不是 $eval() 来获取和设置 ng-model 属性的值。

parseInt() 在评估具有数值的属性时不需要，因为 $eval 会将值转换为数字。 $eval 应该用于设置变量 minValue 和 maxValue。

指令不需要创建子作用域。

$apply() 不是必需的，因为 ngModelController 方法（尤其是 $render()）会自动更新视图。但是，正如@Harijs 在下面的评论中指出的那样，如果还需要更新应用程序的其他部分，则需要 $apply()。

app.directive('numberInput', function ($parse) {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            var minValue = scope.$eval(attrs.min) || 0,
                maxValue = scope.$eval(attrs.max) || Infinity;
            elm.wrap('<div class="number-input-wrap"></div>').parent()
                .append('<div class="number-input-controls"><a href="#" class="btn btn-xs btn-pluimen">+</a><a href="#" class="btn btn-xs btn-pluimen">-</a></div>');
            elm.parent().find('a').bind('click', function (e) {
                var currValue = ctrl.$modelValue,
                    newValue;
                if (this.text === '+' && currValue < maxValue) {
                    newValue = currValue + 1;
                } else if (this.text === '-' && currValue > minValue) {
                    newValue = currValue - 1;
                }
                ctrl.$setViewValue(newValue);
                ctrl.$render();
                e.preventDefault();
                scope.$apply(); // needed if other parts of the app need to be updated
            });
        }
    };
});

fiddle

Answer 2

您不想替换 scope.ngModel 变量，而是替换该变量后面的值。当您读取链接函数第一行中的值时，您已经这样做了：

 currValue = parseInt(scope.$eval(attrs.ngModel))
 //                         ^^^^^^^^^^^^^^^^^^^^

如果它是一个普通值，比如myProperty，你可以在作用域上使用它：

 scope[attr.ngModel] = newValue

但是，如果你有一个表达式值，比如container.myProperty，这将不起作用。在这种情况下（这是更通用的类型，您应该瞄准），您必须评估设置为范围的值，如下所示：

scope.$eval(attrs.ngModel + "=" + newValue)

我必须承认，$eval 部分有点难看，就像在带有 eval 吊坠的 JavaScript 中一样，但它确实可以解决问题。请记住，当您希望设置字符串值时，它可能无法以这种方式工作。那么你就必须转义这些值。

希望有所帮助；）

Answer 3

.directive('numberInput', function ($parse) {
   return {
      require: 'ngModel',
      link: function (scope, elm, attrs){ 
        elm.bind("click", function() {
          var model = $parse(attrs.ngModel);
          var modelSetter = model.assign;
          scope.$apply(function() {
               modelSetter(scope, model);
          });
     }
  }
})