Question

请参阅此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

我不知道$ 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();
            }

            //...
        }
    };
});

$ watch返回注销功能，因此只要将新值分配给$ modelValue，就可以取消注册。

Answer 2

我认为您也可以将其包装在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 3

你的指令中的问题是角度在表达式被评估之前触发了一次。所以这个值第一次是undefined。我不相信可以预防，但是AngularJS是如何运作的。

我在渲染函数中添加了一个val参数来显示实际监视的值（登录到控制台 - 请参见底部的小提琴）。 ngModelController initializes $modelValue to NaN，这就是NaN传递给函数而不是undefined的原因。

但是因为看起来似乎makeHtml函数需要一个字符串，所以如果值为falsy（将其转换为字符串可能更好），一个简单的解决办法是将空字符串传递给它。 p>

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

Updated fiddle

Answer 4

另一种变体（只是有人会在这里找到这个问题）：只需在$ timeout函数中包装指令的执行。例如，我使用它的指令：

.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是指令中的NaN

4 个答案: