21

この 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'ますが、根本的な原因を治療したいと思います。何か案が？

4

4 に答える 4

30

$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 に割り当てられるとすぐに登録解除できます。

于 2014-08-22T13:42:04.300 に答える
19

関数でラップすることもできると思います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;
                   }

               }}
       })
于 2015-03-26T10:54:55.940 に答える
13

ディレクティブの問題は、式が評価される前に angular がウォッチを一度トリガーすることです。したがって、最初の値はundefinedです。それを防ぐことができるとは思いませんが、AngularJS のしくみです。

val実際に監視されている値を表示するために、レンダリング関数にパラメーターを追加しました(コンソールに記録されます。下部のフィドルを参照してください)。はNaNにngModelController 初期化$modelValueNaNされるため、 の代わりに が関数に渡されundefinedます。

しかし、makeHtml関数が文字列を想定しているように見えるため、値が偽の場合は空の文字列を渡すのが簡単な修正方法です (文字列に変換する方がよい場合もあります)。

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

フィドルを更新しました。

于 2013-05-05T11:43:52.483 に答える
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);
                           }
                       });
                   }}
           })
于 2013-07-31T22:27:10.663 に答える