Question

我的指示：

(function () {
  'use strict';

  wikiApp.directive('jzInput', ['$sce', function ($sce) {
    var html = [
      '<input type="text" ng-change="validate()" />'
    ];

    var addSeparator = function (input, sep) {
      return (input + '').replace(/(\d)(?=(\d{3})+$)/g, '$1' + sep);
    };

    var digitsOnly = function (input) {
      return (input.toString()).replace(/[^\d]/g, "");
    };

    var parseInteger = function(input) {
      return addSeparator(digitsOnly(input), ',');
    };

    return {
      restrict: 'E',
      template: html.join(''),
      replace: true,
      require: 'ngModel',
      scope: {
        type: '@'
      },
      link: function($scope, $element, $attr, ngModel) {

      ngModel.$parsers.push(function(value){
        var input = value;
        var output = input;

        // Integer
        output = parseInteger(input);

        console.log(output);
        return output;
      });

      }
    };
  }]);
})();

我的HTML：

<jz-input type="text" ng-model="test">
<input type="text" ng-model="test">

input具有我的验证功能的更新值，我的jzInput指令没有。如何从我的指令中手动更新ngModel的值并使其正确反映？

示例：

Plunker。输入顶部输入，包括数字和字母。请注意，字母显示，一个很好的格式化数字不会。在下面的输入中，使用相同的模型变量，显示正确的预期值。如何让jz-input显示模型的正确预期值？

Answer 1

我希望这是你对指令的期望。只是对您的代码进行了一些更改。

 module.directive('jzInput', [function () {
var html = [
  '<input type="text" />'
];

var addSeparator = function (input, sep) {
  return (input + '').replace(/(\d)(?=(\d{3})+$)/g, '$1' + sep);
};

var digitsOnly = function (input) {
  return (input.toString()).replace(/[^\d]/g, "");
};

var parseInteger = function(input) {
  return addSeparator(digitsOnly(input), ',');
};

return {
  restrict: 'E',
  template: html.join(''),
  replace: true,
  require: 'ngModel',
  scope: {
    test: '=ngModel'
  },
  link: function(scope, element, attr) {

scope.$watch('test',function(newVal){

    if(newVal != undefined) {
        scope.test = parseInteger(newVal);
    }
});

  }
};
  }]);

Answer 2

使用ngModel实现验证的正确方法是向其parsers集合添加一个函数。

ngModel.$parsers.push(function(value){
     var input = value;
     var output = input;

     // Integer
     output = parseInteger(input);
     console.log(output);
     return output;
});

我还对您的代码进行了一些更改：

将指令用作属性而不是元素：restrict: 'A'
将function ($sce) {更改为['$sce',function ($sce) {

DEMO

如何在AngularJS中使用带有自定义指令的ngModel

2 个答案: