директива angularjs для указания символа табуляции

Question

Я пытаюсь создать директиву angularjs, которая позволит вводить символ табуляции в текстовое поле. Его работа частично, но ошибка отображается неправильно. Я хочу, чтобы это поле также требовалось. Вот мой код

.directive('allowTab', function() { 
     return { 
      require: 'ngModel', 
      link: function(scope, ele, attrs, c) { 
       ele.bind('keydown keyup', function(e) { 
        var val = this.value; 
        if (e.keyCode === 9 && e.type === 'keydown') { // tab was pressed 

         // get caret position/selection 
         var start = this.selectionStart, 
          end = this.selectionEnd; 

         // set textarea value to: text before caret + tab + text after caret 
         this.value = val.substring(0, start) + '\t' + val.substring(end); 

         // put caret at right position again 
         this.selectionStart = this.selectionEnd = start + 1; 

         c.$setValidity('allowTab', true); 
         // prevent the focus lose 
         return false; 

        } 
        else if(e.keyCode !== 9 && e.type === 'keyup') { 
         if(val === '') { 
          c.$setValidity('allowTab', false); 
         } 
         else { 
          c.$setValidity('allowTab', true); 
         } 
        } 
       }); 
      } 
     } 
    }); 

вот jsfiddle: http://jsfiddle.net/36qp9ekL/184/

Answer 1

Вы пытаетесь держать фокус в текстовом поле после символа табуляции?

Вы должны использовать метод preventDefault():

// ... 
       // set textarea value to: text before caret + tab + text after caret 
       this.value = val.substring(0, start) + '\t' + val.substring(end); 

       // put caret at right position again 
       this.selectionStart = this.selectionEnd = start + 1; 

       c.$setValidity('allowTab', true); 

       e.preventDefault(); 

       // prevent the focus lose 
       return false; 

// ... 

http://jsfiddle.net/36qp9ekL/186/

Answer 2

Вы измените значение текстового поля и задать проверку в JQuery - не в угловом жизненного цикла. Чтобы обновить интерфейс во времени, вам нужно вызвать область действия. $ Digest() для синхронизации угловой модели с dom.

   // put caret at right position again 
       this.selectionStart = this.selectionEnd = start + 1; 

       c.$setValidity('allowTab', true); 
       scope.$digest(); 

http://jsfiddle.net/36qp9ekL/187/

Answer 3

я продлил версию Майкла и получил это работает именно то, что я искал, вот jsfiddle: http://jsfiddle.net/36qp9ekL/190/

else if (e.keyCode !== 9 && e.type === 'keyup') { 
    var hasTab = val.indexOf('\t') > -1; 
    if(hasTab){ 
     c.$setValidity('allowTab', true); 
    } 
    else if(val == '') { 
     c.$setValidity('allowTab', false); 
    } 
    else { 
     c.$setValidity('allowTab', true); 
    }          
    scope.$digest(); 
}