Модель. $modelValue - NaN в директиве

Ответ 1

Проблема в вашей директиве заключается в том, что angular запускает часы один раз до того, как выражение будет оценено. Поэтому в первый раз значение undefined. Я не верю, что это можно предотвратить, но как работает AngularJS.

Я добавил параметр val к вашей функции рендеринга, чтобы показать фактическое наблюдаемое значение (зарегистрировалось на консоли - см. скрипку внизу). ngModelController инициализирует $modelValue для NaN, поэтому NaN передается функции вместо undefined.

Но так как кажется, что функция makeHtml ожидает строку, простое исправление должно передать ей пустую строку, если значение ложно (может быть даже лучше преобразовать его в строку).

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

Обновлена ​​скрипка.

Ответ 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();
            }

            //...
        }
    };
});

$watch возвращает функцию дерегистрации, поэтому ее можно незарегистрировать, как только новое значение присвоено $modelValue.

Ответ 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;
                   }

               }}
       })

Ответ 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);
                           }
                       });
                   }}
           })