模型$ modelValue是楠指令(model.$modelValue is NaN in dir

看到这个的jsfiddle： http://jsfiddle.net/8bENp/66/

如果你看一下JavaScript控制台，你会看到这样的事情：

TypeError: Object NaN has no method 'replace'
    at makeHtml (https://raw.github.com/coreyti/showdown/master/compressed/showdown.js:62:705)
    at render (http://fiddle.jshell.net/_display/:50:42)
    at link (http://fiddle.jshell.net/_display/:54:13)
    at k (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js:42:321)
    at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js:38:198)
    at k (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js:42:261)
    at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js:38:198)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js:37:332
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js:15:440
    at Object.e.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js:85:416) <markdown ng-model="someCode" class="ng-pristine ng-valid"> angular.min.js:60

问题是model.$modelValue是NaN时候它的类型甚至不应该是一个数字。尽管如此，降价呈现。我可以添加一个typeof model.$modelValue == 'string'检查，但我宁愿治疗的根本原因。任何的想法？

Answer 1:

在你的指令的问题是，角触发表达已经被评估之前把手表。所以，第一次的价值是undefined 。我不相信可以预防的，但如何AngularJS的作品。

我添加了一个val参数来渲染功能来显示实际观看值（记录到控制台-见底部的小提琴）。该ngModelController 初始化$modelValue为NaN ，这就是为什么NaN传递给函数，而不是undefined 。

但是，因为它看起来好像makeHtml功能需要一个字符串，一个简单的办法是将它传递一个空字符串，如果该值是falsy（可能是更好的将其转换为字符串）。

var htmlText = converter.makeHtml(model.$modelValue || '');

更新小提琴。

Answer 2:

我不知道，$ modelValue被初始化为NaN并遇到类似的问题。如果确实需要在初始化时$ modelValue，一个解决方案可能是看它，直到它已经被分配了一个新的价值：

.directive('contentEditor', function(){
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function($scope, $element, $attrs, ngModel){

            var unregister = $scope.$watch(function(){
                return ngModel.$modelValue;
            }, initialize);

            function initialize(value){
                ngModel.$setViewValue(value);
                unregister();
            }

            //...
        }
    };
});

在$手表返回注销功能，从而为一个新值已被分配给$ modelValue它能够尽快被注销。

Answer 3:

我想你也可以把它包装在ngModel.$render功能。

像这样：

.directive('classOnValue', function($timeout) {
           return {
               restrict: 'A',
               require: 'ngModel',
               link: function(scope, element, attrs, ngModel) {

                   ngModel.$render = function(){
                       //Do something with your model
                       var actualValue = ngModel.$modelValue;
                   }

               }}
       })

Answer 4:

另一种变体（只是如果有人将在这里找到这个问题）：只是包装在$超时功能指令的执行。作为例子，我的指令，它使用它：

.directive('classOnValue', function($timeout) {
               return {
                   restrict: 'A',
                   require: 'ngModel',
                   link: function(scope, element, attrs, ngModel) {
                       $timeout(function() {
                           var value = (attrs.value || ngModel.$modelValue || ngModel.$viewValue );
                           if (value) {
                               element.addClass(attrs.classOnValue);
                           }
                       });
                   }}
           })

文章来源: model.$modelValue is NaN in directive