当他们在范围属性上时,我遇到了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);
请帮忙!
答案 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