带有 Angular 指令的 Jquery 输入掩码插件

【问题标题】：Jquery Input Mask Plugin with Angular Directive带有 Angular 指令的 Jquery 输入掩码插件
【发布时间】：2016-01-30 10:54:58
【问题描述】：

我正在尝试使用 angular 指令执行 jquery 输入掩码插件。当我尝试这个时它正在工作，但是当我保存它时，价值不会到来。谁能帮我解决这个问题？？

我的脚本

 app.directive('maskrate', function ($http) {
            return {
                link: function (scope, element, attrs, ngModelCtrl) {
                    $("#rateVal").mask("0.99");
                }
            }

        });

我的 HTML

<input type="text" name="inputTaxRate" data-ng-model="taxRate.Rate" id="rateVal" class="form-control" maskrate>

【问题讨论】：

标签： javascript jquery angularjs mvvm

【解决方案1】：

这里你需要自己更新ng-model的值，因为mask input js或maskrate指令不会改变ng-model的值。

要自己做，请按照以下代码。

app.directive('maskrate', function($http) {
    return {
      require: 'ngModel', // requiring ng-model directive on the element
      link: function(scope, element, attrs, ngModelCtrl) {

        var jquery_element = $(element);
        jquery_element.mask("0.99");

        //listen for events on text element
        jquery_element.on('keyup paste focus blur', function() {
            var val = $(this).val();

            // update the ng-model value
            ngModelCtrl.$setViewValue(val);
            ngModelCtrl.$render();

        })

      }
    }
});

ngModelCtrl.$setViewValue(val); & ngModelCtrl.$render(); 负责更新ng-model 的值。

这里是DEMO

【讨论】：