帶有 Angular 指令的 Jquery 輸入掩碼插件

Question

我正在嘗試使用 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>

Answer 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值。

這是演示