"변경시"콜백이있는 jQuery 플러그인의 AngularJS 모델 업데이트

Question

화상 키보드가 필요한 터치 스크린 컴퓨터 용 웹 응용 프로그램을 만들고이 우수한 (또는 적어도 하나만 사용하려는) 나는 그것이 끔찍한 키보드가 아니라는 것을 알 수 있었다.) 키보드. https://github.com/Mottie/Keyboard/

화면 키보드를 사용할 때 모델이 업데이트되지 않는다는 것이 이미 짐작 하셨을 것입니다. 이 작품의 종류 내 코드, 그러나 그것은 추한 모든 종류의 :

partitial HTML : 그래서에

$('.keyboard') 
.keyboard({ 
    stickyShift: false, 
    usePreview: false, 
    autoAccept: true, 

    change: function(e, kb, el) { 
     $scope.newUser.name = el.value; 
    } 
}); 

:

<input type="text" class="keyboard" ng-model="newUser.name"> 
<input type="text" class="keyboard" ng-model="newUser.email> 

가 partitial 페이지 컨트롤러, 키보드를 초기화 변경 jQuery 플러그인에 의해 실행 뭔가를 실행할 수 있습니다. 분명히이 작업은 하나의 필드/모델, 이름 하나 (전자 메일이 전혀 작동하지 않고 이름 필드를 덮어 쓰는 동안)를 업데이트하는 것입니다. 키보드로 사용할 때 업데이트 할 필드가 필요합니다. 하나를 수정하십시오. 어떻게하면 덜 끔찍한, 하드 코딩되지 않은 (가능한 경우 복잡하지는 않은) 방식으로이 문제를 해결할 수 있습니까?

Answer 1

각도로 작성하는 방법은 실제로 지시문을 작성하는 것입니다. 특정 클래스 이름으로 지시문을 assosciate 수 있습니다. 모든 요소는 다음 정의 키보드와 NG-모델의 클래스 모두있는 경우

그래서, 당신의 지시자 지금

app.directive('keyboard',function(){ 
    return { 
    require : '?ngModel', 
    restrict : 'C', 
    link : function(scope,element,attrs,ngModelCtrl){ 
     if(!ngModelCtrl){ 
     return; 
     } 
     $(element).keyboard({ 
     stickyShift: false, 
     usePreview: false, 
     autoAccept: true, 

     change: function(e, kb, el) { 
      ngModelCtrl.$setViewValue(el.value); 
     } 
    }); 
    } 
    }; 
}); 

처럼 보일 것이다, 키보드 팝업을해야한다. 희망이 도움이됩니다.

Answer 2

나는 ganraj 지시어를 수정했다. 이제 모델은 키보드 버튼을 누를 때마다 업데이트됩니다.

app.directive('keyboard',function(){ 
    return { 
    require : '?ngModel', 
    restrict : 'C', 
    link : function(scope,element,attrs,ngModelCtrl){ 
     if(!ngModelCtrl){ 
     return; 
     } 

     $(element).keyboard({ 
     stickyShift: false, 
     usePreview: false, 
     autoAccept: true, 

     change: function(e, kb, el) { 
      if(!scope.$$phase && !scope.$root.$$phase) 
      { 
       scope.$apply(function(){ 
        ngModelCtrl.$setViewValue(el.value); 
       }); 
      } 
     } 
    }); 
    } 
    }; 
});