Преобразование плагина jQuery в директиву AngularJS

Question

Я пытаюсь использовать Input Mask 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