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”。

如果我使用ng-model="amount"将输入元素的数据绑定到外部控制器中的变量，则输入元素中的逻辑有效，但外部控制器的数量值不会更新。

如果我ng-model="values.amount"用于绑定，则外部控制器的 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 回答