javascript - Angular 自定义指令在 promise 解析后未设置值

Question

我有一个自定义指令，当用户输入值时它效果很好，问题是加载表单时，输入字段没有被渲染。这是我的指令:

   var cuitModule = angular.module('cuitModule', []).directive('cuitDirective', ['$filter', function ($filter) {
  return {
      require: '?ngModel',
      link: link,
      restrict: 'E',
      scope: {
          cuitPlaceholder: '=placeholder'
      },
      templateUrl: 'js/common/directives/cuit/cuit.directive.html'
  };

  /*
   Intended use:
   <cuit-directive placeholder='prompt' model='someModel.cuit'></cuit-directive>
   Where:
   someModel.cuit: {String} value which to bind only the numeric characters [0-9] entered
   ie, if user enters 20-33452648-9, value of 20334526489 will be bound to model
   prompt: {String} text to keep in placeholder when no numeric input entered
   */
  function link(scope, element, attributes, ngModel) {

      // scope.inputValue is the value of input element used in template
      scope.inputValue = ngModel.$viewValue;

      scope.$watch('inputValue', function (value, oldValue) {

          value = String(value);
          var number = value.replace(/[^0-9]+/g, '');
          // scope.cuitModel = number;
          scope.inputValue = $filter('cuit')(number);
          var valid = validarCuit(number);
          ngModel.$setValidity('required', valid);
          if (valid) {
              ngModel.$setViewValue(number);
          }
      });

      //source https://es.wikipedia.org/wiki/Clave_%C3%9Anica_de_Identificaci%C3%B3n_Tributaria#C.C3.B3digo_Javascript
      function validarCuit(cuit) {

          if (cuit.length !== 11) {
              return false;
          }

          var acumulado = 0;
          var digitos = cuit.split('');
          var digito = digitos.pop();

          for (var i = 0; i < digitos.length; i++) {
              acumulado += digitos[9 - i] * (2 + (i % 6));
          }

          var verif = 11 - (acumulado % 11);
          if (verif == 11) {
              verif = 0;
          }

          return digito == verif;
      }
  }}]).filter('cuit', function () {
  /*
   Format cuit as: xx-xxxxxxxx-x
   or as close as possible if cuit length is not 10
   */
  return function (number) {
      /*
       @param {Number | String} number - Number that will be formatted as cuit number
       Returns formatted number: ##-########-#
       if number.length < 2: ##
       if number.length < 10: ##-########
       if number.length === 11: ##-########-#
       */
      if (!number) {
          return '';
      }

      number = String(number);

      // Will return formattedNumber.
      // If phonenumber isn't longer than an area code, just show number
      var formattedNumber = number;

      //Type 20, 23, 24 y 27 Personas Físicas or 30, 33 y 34 Empresas
      var type = number.substring(0, 2);

      var main = number.substring(2, 10);
      var verifyNumber = number.substring(10, 11);

      if (main) {
          formattedNumber = (type + '-' + main);
      }
      if (verifyNumber) {
          formattedNumber += ('-' + verifyNumber);
      }
      return formattedNumber;
  };});

这是 html:

    <cuit-directive placeholder="'CUIT'" ng-model='vm.merchant.idNumber' required></cuit-directive>

我当然以某种形式调用它。

我通过休息服务将数据获取到我的 Controller ，所以我正在做类似的事情:

    function EditMerchantCtrl($state, $ionicHistory, merchantsService, $ionicPopup, $timeout, $ionicLoading) {
     var vm = this;
     function init(){
        merchantsService.get().then(
          function(response){
            vm.merchant = response.data;
          });
     }}

我不知道为什么在收到服务的响应后无法填充该字段。任何帮助将不胜感激。

Answer 1

你应该实现 ngModelController 的 $render 函数，尝试这样的事情:

ngModel.$render = function() {
   scope.inputValue = ngModel.$viewValue;
}

希望有帮助。