2

私が作成したディレクティブは、関数 setFormatting を使用して、入力フィールドのテキスト値をマスクします。

scope.$watch(element, function() {
    modelCtrl.$setViewValue(setFormatting(element.val(), attrs.symbol));
    modelCtrl.$render();
});

element.bind('blur', function() {
    modelCtrl.$setViewValue(setFormatting(element.val(), attrs.symbol));
    modelCtrl.$render();
});

scope.$watch は、コンテンツが初めてロード/適用されるときにマスクを適用し、element.bind はそれ以外のときにマスクを適用します。scope.$watch は、シンボル (存在する場合) を ng-model 変数の一部として保存しています。element.bind はそうではありません。$setViewValue() と $render() が ng-model 変数を更新していないと思いました。変数はどこで更新されますか?

添付のフィドルを参照してください: http://jsfiddle.net/PJ3M4/
ありがとうございます。

4

4 に答える 4

16

ここでは と を使用$formatters.unshiftしました$filter:

ここに画像の説明を入力

JS

var fessmodule = angular.module('myModule', []);

fessmodule.controller('fessCntrl', function ($scope) {
    $scope.test = 123456879;
});
fessmodule.$inject = ['$scope'];

fessmodule.directive('format', ['$filter', function ($filter) {
    return {
        require: '?ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (!ctrl) return;

            var symbol = "°"; // dummy usage

            ctrl.$formatters.unshift(function (a) {
                return $filter(attrs.format)(ctrl.$modelValue) +  symbol;
            });

            ctrl.$parsers.unshift(function (viewValue) {
                var plainNumber = viewValue.replace(/[^\d|\-+|\.+]/g, '');
                elem.val($filter('number')(plainNumber) + symbol);
                return plainNumber;
            });
        }
    };
}]);

HTML

 <input type="text" ng-model="test" format="number"/>

デモFiddle

補足として

これも役に立ちます: Fiddle

于 2013-11-08T14:57:43.067 に答える
1

「$watchダイジェスト」ループ内で実行されます。コールバックは角度のelement.bind外側から呼び出されるため、次の明示的な呼び出しを追加する必要がありますscope.$apply()。

element.bind('blur', function() {
    modelCtrl.$setViewValue(setFormatting(element.val(), attrs.symbol));
    modelCtrl.$render();
    scope.$apply();
});

更新されたフィドル

AngularJS のイベント ループに関する情報については、ドキュメントを参照してください。

于 2013-11-08T14:40:56.587 に答える
1

単純に使用することもできます

ui-mask="{{'999,999,999°'}}"
于 2016-01-21T13:53:28.017 に答える
0

scope.$watch() { ... } に modelCtrl.$parsers.push() { ... } を追加することで、ng-model に希望どおりに値を格納することができました。 

scope.$watch(element, function() {
    modelCtrl.$parsers.push(function(inputValue) {
        showAlert("Watch", 1);

        if (!prev) {
            prev = false;
            var returnVal = checkVal(inputValue, modelCtrl, decimals, true, minVal, maxVal);

            if (String(returnVal) === ".") {
                setAndRender(modelCtrl, "");
                return "";
            }
            else {
                return returnVal;
            }
        }
        return String(inputValue).replace(/[^0-9 . -]/g, '');
    });

    prev = true;
    setAndRender(modelCtrl, setFormatting(element.val(), decimals, attrs.prefix, attrs.symbol));
});
于 2013-11-09T16:43:19.327 に答える