Angular JS NaN处理

时间:2014-06-17 19:07:28

标签: angularjs

当他们在范围属性上时,我遇到了NaN的问题。它们作为NaN来自服务器,所以假设我无法改变它。

我在这里有一个小提琴http://jsfiddle.net/9e7Hy/83/

第一个指令传递1,它按预期工作。

第二个指令通过了NaN。

我对指令有监视,如果值为NaN,则scope.nan属性设置为true,scope.value应设置为10. scope.value属性永远不会更改,但范围.nan财产呢。这似乎是角度代码本身内的观察者的一个问题,它必须是因为NaN!== NaN。如果您将示例中的NaN更改为" undefined",一切都按预期工作。

观察者..

scope.$watch('value',function(nv,ov){

                if(angular.isDefined(nv)&&isNaN(nv)){

                   scope.value=10;
                   scope.nan=true;
                }
            },true);

请帮忙!

1 个答案:

答案 0 :(得分:2)

你可以这样做:

.directive('rnStepper', function() {
    return {
        restrict: 'AE',
        require: 'ngModel',
        scope: {
            nan:'='
        },
        template: '<button ng-click="decrement()">-</button>' +
                  '<div>{{value}}</div>' +
                  '<button ng-click="increment()">+</button>',
        link: function(scope, iElement, iAttrs, ngModel) {

            ngModel.$render = function(){
                if(isNaN(ngModel.$modelValue)){
                    scope.value = 10;                    
                    scope.nan=true;
                    ngModel.$setViewValue(scope.value);
                }
                else
                    scope.value=ngModel.$modelValue;
            }
            scope.increment = function() {
                scope.value++;
                ngModel.$setViewValue(scope.value);
            }
            scope.decrement = function() {
                scope.value--;
                ngModel.$setViewValue(scope.value);
            }
        }
    };
});

这是小提琴:http://jsfiddle.net/aartek/9e7Hy/89/

使用ngModel.$modelValue,您可以阅读模型值。使用ngModel.$setViewValue更新模型值,每次要为控制器更新数据时都应该这样做。在此处查看两个函数的说明:https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

如果您以前从未使用过ngModel,请查看以下简短视频:https://egghead.io/lessons/angularjs-using-ngmodel-in-custom-directives