0

Java スクリプト オブジェクトのプロパティを監視するという問題に直面しました。ここでこの問題について部分的に説明しましたが、解決策が得られませんでした...

問題を別の方法で説明します。ここにフィドルがあります

これが私のディレクティブのコードです：

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

var ctrl = function($scope) {
        $scope.amount = '0.00';

        $scope.values = {
                amount: 0.00
        };
};

myApp.directive('currency', function($filter) {
    return {
        restrict: "A",
        require: "ngModel",
        scope: {
            separator: "=",
            fractionSize: "=",
            ngModel: "="
        },
        link: function(scope, element, attrs) {

            if (typeof attrs.separator === 'undefined' || 
                    attrs.separator === 'point') {
                scope.separator = ".";
            } else {
                scope.separator = ",";
            };

            if (typeof attrs.fractionSize === 'undefined') {
                scope.fractionSize = "2";
            };

            scope[attrs.ngModel] = "0" + scope.separator;
            for(var i = 0; i < scope.fractionSize; i++) {
                scope[attrs.ngModel] += "0";
            };

            scope.$watch(attrs.ngModel, function(newValue, oldValue) {

                if (newValue === oldValue) {
                    return;
                };

                var pattern = /^\s*(\-|\+)?(\d*[\.,])$/;

                if (pattern.test(newValue)) {
                    scope[attrs.ngModel] += "00";
                    return;
                };

            }, true);
        }
    };
});

そして、これは私のHTMLレイアウトです:

<div ng-app="myApp">
    <div ng-controller="ctrl">
        {{amount}}<br>
        <input type="text" style="text-align: right;" ng-model="amount" currency separator="point" fraction-size="2"></input>
    </div>
</div>

入力要素の値を外部コントローラーの項目にバインドしたいのですvalues.amountが、ディレクティブの監視命令が機能しません...

実装したいロジックは次のとおりです。ユーザーがポイントを置いた場合、入力要素に余分なゼロを追加したい。入力要素の値が「42」で、ユーザーがそこにポイントを置いた場合、値は「42」になります。次に、この「42.00」のようにするには、2 つの余分なゼロを追加する必要があります。

ng-model="amount"入力要素のデータを外部コントローラーの変数にバインドする場合、入力要素のロジックは機能しますが、外部コントローラーの金額値は更新されません。

バインディングに使用するng-model="values.amount"と、外側のコントローラーの値も入力要素のロジックも機能しません。

values.amount実際、入力要素を使用命令にバインドする必要がありますng-model="values.amount"が、機能せず、理由がわかりません。

誰かがこの問題を解決するのを手伝ってくれますか? アイデアや提案はありますか？

4

2 に答える 2

0

これは式のために機能しません

scope[attrs.ngModel] = ...

このamount場合、これは単に に割り当てられscope.amountます。ただし、values.amountthis では に割り当てずscope.values.amount、代わりにvalues.amountスコープの ' ' プロパティを割り当てます。

このように割り当てるのではなく、その$parseようにサービスを使用できます。

var parsed = $parse(attrs.ngModel); // Parse expression
var currentValue = parsed(scope); // Evaluate expression
parsed.assign(scope, 'newvalue'); // Assign expression

これで問題は解決するはずですが、より適切なアプローチとして、代わりにパーサーとフォーマッターを使用することを検討することをお勧めします。モデルの値を自分で解釈するのではなく、パーサーとフォーマッターを使用して変換を制御し、必要なngModelコントローラーを介してこれを表示および更新できます。

于 2013-12-05T00:24:42.063 に答える
0

私はあなたの問題を解決しようとしましたが、ここにあります：

1) ディレクティブ スコープを削除します
2) ngModel をリンク関数に追加します
3) コードのこの部分を削除します (不要)

scope[attrs.ngModel] = "0" + scope.separator;
for(var i = 0; i < scope.fractionSize; i++) {
   scope[attrs.ngModel] += "0";
};

代わりにこれを$watchに置き換えます

ngModel.$parsers.unshift(function(viewValue) {
   var pattern = /^\s*(\-|\+)?(\d*[\.,])$/;

   if (pattern.test(viewValue)) {
      viewValue += "00";
   };

   element.val(viewValue); // set element view value
   return viewValue; // set new model value
});

私はこれを試してみて、うまくいきます。

jsFiddleデモ

この投稿のリソース

乾杯

于 2013-12-05T02:05:51.257 に答える