将 jQuery 插件转换为 AngularJS 指令

Question

我正在尝试使用输入掩码 jQuery plugin 作为指令，但在 Chrome 的控制台错误中出现以下错误。

TypeError: Cannot read property 'length' of undefined

我的代码

JS

var app = angular.module('app', ['ngResource']);

app.directive('inputMask', function(){
    return {
        restrict: 'A',
        link: function(scope, element){
             element.mask();
        }
    }
})

HTML

<input type="text" class="form-control input-mask" data-input-mask data-mask="{mask: 00/00/0000}" placeholder="eg: 23/05/2014">

http://plnkr.co/edit/Kp3SYS0cbIfVm1gTwtE0?p=preview

请帮我解决这个问题。

Answer 1

长度错误是因为 element.mask() 方法需要一个包含您要使用的掩码字符串的属性。（在本例中为“00/00/0000”）。所以你必须改变一些东西，首先是你的指令：

var app = angular.module('app', ['ngResource']);

app.directive('inputMask', function(){
    return {
        restrict: 'A',
        scope: {
          inputMask: '='
        },
        link: function(scope, element){
          element.mask(scope.inputMask.mask);
        }
    }
})

然后在html所以你可以在元素中设置掩码。

<input type="text" class="form-control" data-input-mask="{mask: '00/00/0000'}" placeholder="eg: 23/05/2014">

这是一个 Plunker 的工作：

http://plnkr.co/edit/BbJtsF9mWx4n29CfZajF?p=preview

将 jQuery 插件转换为 AngularJS 指令

Converting jQuery plugin to AngularJS Directive

angularjs

angularjs-directive

jquery-inputmask