Question

我正在尝试实施一个键入货币值的指令。

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>

我想将input元素中的值绑定到控制器中的values.amount项，但是我的指令的watch指令不起作用。

如何利用与watch JSON对象的双向数据绑定？

为了更准确地理解问题，我创建了jsfiddle。

任务如下：如果用户放置一个点，则在输入元素中添加额外的零。我的意思是如果输入元素中的值说“42”并且用户给它一个点，那么现在的值是“42”。两个额外的零必须像这样“42.00”。

我的问题：

如果我使用ng-model="amount"输入元素中的逻辑工作，但外部控制器的金额值不会更新。
如果我使用ng-model="values.amount"进行绑定，外部控制器和输入元素逻辑都不起作用。

我真的必须使用ng-model =“values.amount”指令，但它不起作用，我不知道为什么。有什么想法吗？

观察JSON对象属性的更改

0 个答案: