Javascript AngularJS:无法使用ngModelController$格式化程序格式化null或未定义的值

我有一个AngularJS指令，它包含一个文本输入，它有自己的模型，该模型通过指令的ng模型从控制器范围传递一个值

请在下面查看此笔和代码：

问题是，有时该模型恰好是一个null或未定义的值，在这种情况下，我希望使用文本输入的ngModelController将文本输入中null值的显示格式化为类似“null”的形式

如果值是我在格式化程序中匹配的某个任意字符串，则它可以工作，但如果值为null，则它不能工作。我也使用未定义的相同结果测试了该值

对此有何见解/解决方法，或者这只是$formatters的一个缺点

HTML:

JAVASCRIPT:

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.model = null;
    $scope.model2 = 'make this null';
  })

  .directive('inputDirective', function() {
    var template = 
        '<div>'+
          '<div class="input-group">'+
            '<input type="text" class="form-control" ng-model="localModel">'+
            '<span class="input-group-btn">'+
              '<button ng-click="save()" class="btn btn-default" type="button">Save</button>'+
            '</span>'+
          '</div>'+
        '</div>';

    function link (scope, elem, attr) {
      var inputModelCtrl = elem.find('input').controller('ngModel');

      function formatter(val) {
        if (val === 'make this null') {
          return scope.nullValue;
        }
        if (val === null) {
          return scope.nullValue;
        }
        return val;
      }

      scope.nullValue = 'NULL';
      scope.localModel = scope.ngModel;
      scope.save = function() {
        scope.ngModel = scope.localModel;
      }
      inputModelCtrl.$formatters.push(formatter);
    }

    return {
      restrict: 'E', 
      replace: true,
      require: 'ngModel',
      template: template,
      link: link,
      scope: {
        ngModel: '='
      }
    }
  })
;

---

我设法找到了解决办法。在创建指令时，我通过在ngModel上放置一个手表来初始化该值，捕捉null并使其为“null”，angular$formatters将实际格式化该值。我将localModel的视图值格式化为，它就可以工作了

当我从指令向控制器作用域发送'NULL'时，为了确保模型值是正确的，我在ngModelController上使用$parser来监视'NULL'并将其转换为NULL

为了使其完整循环，ngModel上的指令中的$watch使其成为这样，如果在指令之外将值设置为null，localModel将被重新初始化为“null”，并格式化以正确显示

这可能看起来很可笑，但实际的指令是一个定制的选择菜单，正如您所想象的，它需要此功能

您可以在此处看到更改：

我希望这能帮助任何遇到类似问题的人，即使这个场景非常具体，我必须自己回答

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.model = null;
    $scope.model2 = 'make this null';
  })

  .directive('inputDirective', function() {
    var template = 
        '<div>'+
          '<div class="input-group">'+
            '<input type="text" class="form-control" ng-model="localModel">'+
            '<span class="input-group-btn">'+
              '<button ng-click="save()" class="btn btn-default" type="button">Save</button>'+
            '</span>'+
          '</div>'+
        '</div>';

    function link (scope, elem, attr) {
      var inputModelCtrl = elem.find('input').controller('ngModel');

      function formatter(val) {
        if (val === 'make this null') {
          return scope.nullValue;
        }
        if (val === null) {
          return scope.nullValue;
        }
        return val;
      }

      scope.nullValue = 'NULL';
      scope.localModel = scope.ngModel;
      scope.save = function() {
        scope.ngModel = scope.localModel;
      }
      inputModelCtrl.$formatters.push(formatter);
    }

    return {
      restrict: 'E', 
      replace: true,
      require: 'ngModel',
      template: template,
      link: link,
      scope: {
        ngModel: '='
      }
    }
  })
;

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.model = null;
    $scope.getModel = function() {
      return $scope.model === null ? 'null' : $scope.model;
    }
    $scope.setToNull = function() {
      $scope.model = null;
    }
  })

  .directive('inputDirective', function() {
    var template = 
        '<div>'+
          '<div class="input-group">'+
            '<input type="text" class="form-control" ng-model="localModel">'+
            '<span class="input-group-btn">'+
              '<button ng-click="save()" class="btn btn-default" type="button">Save</button>'+
            '</span>'+
          '</div>'+
        '</div>';

    function link (scope, elem, attr, ngModelCtrl) {
      var inputModelCtrl = elem.find('input').controller('ngModel');
      var nullDisplay = '<NULL>';

      function ngModelParser(val) {
        if (val === 'NULL') return null;
        return val;
      }

      function localModelFormatter(val) {
        if (val === 'NULL') return nullDisplay;
        return val;
      }

      scope.save = function() {
        ngModelCtrl.$setViewValue(scope.localModel);
        console.log(ngModelCtrl.$modelValue);
      }

      scope.$watch('ngModel', function(val) {
        if (val === null) val = 'NULL';
        scope.localModel = val;
      })

      inputModelCtrl.$formatters.push(localModelFormatter);
      ngModelCtrl.$parsers.push(ngModelParser);
    }

    return {
      restrict: 'E', 
      replace: true,
      require: 'ngModel',
      template: template,
      link: link,
      scope: {
        ngModel: '='
      }
    }
  })
;