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

我的指示：

(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;
      });

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

（函数（）{
"严格使用",；
wikiApp.directive（'jzInput'，['$sce'，function（$sce）{
变量html=[
''
];
var addSeparator=函数（输入，sep）{
返回（输入+''）.replace（/（\d）（？=（\d{3}）+$）/g，'$1'+sep）；
};
var digitsOnly=函数（输入）{
return（input.toString（））.replace（/[^\d]/g，“”）；
};
var parseInteger=函数（输入）{
返回addSeparator（仅数字（输入），'，'）；
};
返回{
限制：'E'，
模板：html.join（“”），
替换：正确，
要求：'ngModel'，
范围：{
类型：“@”
},
链接：函数（$scope、$element、$attr、ngModel）{
ngModel.$parsers.push（函数（值）{
var输入=价值；
var输出=输入；
//整数
输出=解析整数（输入）；
控制台日志（输出）；
返回输出；
});
}
};
}]);
})();

我的HTML：

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

input

具有来自我的validate函数的更新值，而我的

jzInput

指令没有。如何从指令中手动更新ngModel的值并使其正确反映

例如：

---

。在顶部输入中键入数字和字母。请注意，显示字母时，格式良好的数字不会显示。在下面的输入中，使用相同的模型变量显示正确的预期值。如何获取我的

jz输入

以显示模型的正确预期值？

我希望这就是您从指令中所期望的。刚刚对代码做了一些更改

 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);
    }
});

  }
};
  }]);

module.directive（'jzInput'，[function（）{
变量html=[
''
];
var addSeparator=函数（输入，sep）{
返回（输入+''）.replace（/（\d）（？=（\d{3}）+$）/g，'$1'+sep）；
};
var digitsOnly=函数（输入）{
return（input.toString（））.replace（/[^\d]/g，“”）；
};
var parseInteger=函数（输入）{
返回addSeparator（仅数字（输入），'，'）；
};
返回{
限制：'E'，
模板：html.join（“”），
替换：正确，
要求：'ngModel'，
范围：{
测试：'=ngModel'
},
链接：功能（范围、元素、属性）{
范围：$watch（'test'，函数（newVal）{
if（newVal！=未定义）{
scope.test=parseInteger（newVal）；
}
});
}
};
}]);

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

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

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

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

• 将指令用作属性而不是元素：

  restrict:'A'

• 将

  函数（$sce）{

  更改为

  ['$sce'，函数（$sce）{

---

您好，我尝试了您的代码，但它不起作用。我添加了一个Plunker演示，您可以看到发生了什么。@Justin808:返回值（

返回输出；

）“从解析器”是您的基础模型的值集。也许我不完全理解您的要求，但您可以更改函数以返回所需的值，如果输入值无效，则返回未定义的值。@Justin808:什么不起作用？我已尝试再次阅读问题，但仍然不理解您的要求。您可以更改此函数吗您需要更详细地解释吗？在这段代码中，

parseInteger（input）；

从

input

中删除所有字母，并返回设置为ngModel基础属性的值。（预期行为）您好，您正在观看scope.test。问题是我不知道该模型是否为

test

。该指令的用户可以通过他们喜欢的任何模型。我想我误解了您的要求。但在上面的代码中，我正在观看与ng模型绑定的测试。请查找demo@Justin808“test”在这个例子中是完全任意的。如果它是作用域：{linkedModel:'=ngModel'}scope.$watch（'linkedModel'，function（newVal）{这更清楚吗？