포커스 새 탭의 텍스트 영역 부트 스트랩 3 + AngularJS

Question

각 텍스트 영역이 포함 된 부트 스트랩 토글 가능 탭이 있습니다. 텍스트 영역이 포함 된 새 탭을 만들 수 있도록 설정했습니다. 그러나이 새 탭을 만들 때 커서 내부에있는 텍스트 영역을 커서로 지정해야합니다.

다음은 실제 문제를 나타내는 약간 큰 피들입니다. http://jsfiddle.net/HB7LU/1390/ 바이올린의 경우 첫 번째 항목을 만든 후에 텍스트 영역을 포커스해야합니다.

function ListController($scope, topics) { 

    var currentId = 0; 
    $scope.mainList = topics; 

    $scope.addItem = function() { 
     topics.push({ 
      id: (currentId++), 
      active: "active", 
      name: $scope.newItem, 
     }); 

     //clears input box 
     $scope.newItem = ""; 

     //remove previous bootstrap active classes 
     $('ul.nav-pills li.active').removeClass('active'); 
     $('.tab-content .tab-pane.active').removeClass('active'); 

     //Can't get this part to work!! 
     //(the textareas have dynamic id's) 
     $('#textarea0').focus(); 
    } 
} 

불편한 점은 버튼을 만들고 컨트롤러 외부에서 직접 초점을 맞추면 텍스트 영역에 집중할 수 있다는 것입니다. (바이올린에 예제가 있습니다.) 이것은 내가 실제로 만들어지기 전에 textarea에 초점을 맞추려고한다는 것을 알게한다. 그러나 나는 콜백 함수를 시도하고 그것도 작동하지 않는다. 아마도 그것을 망쳤을 것이다.

Answer 1

Angular는 컨트롤러 내부에서 DOM 조작을 수행하지 않을 것을 권장합니다. 이 지시선에서 기술적으로 조작을하고 있지만 컨트롤러 기능을 사용하기 때문에 라인이 흐려집니다. 나는 그것을 개인적으로 피할 것입니다.

두 경우 모두 지침에서이 작업을 수행하면 장점은 element에 쉽게 액세스 할 수 있다는 것입니다. 그리고 jQuery는 Angular aware와 jQuery를 쉽게 사용할 수 있습니다.

그래서 내가 당신에게 문제의 원인 컨트롤러에서이 줄을 삭제 것 : 대신, $('#textarea0').focus();

을 그리고를, 당신의 지침이 jQlite 라인을 추가

이

angular.element(document.querySelector('#textarea0')).focus(); 

그래서 지시어는 이제 다음과 같습니다 :

myApp.directive('ngEnter', function ($timeout) { 
    return function (scope, element, attrs) { 
     element.bind("keydown keypress", function (event) { 
      if(event.which === 13) { 
       scope.$apply(function(){ 
        scope.$eval(attrs.ngEnter); 
       }); 
       angular.element(document.querySelector('#textarea0')).focus(); 

       event.preventDefault(); 
      } 
     }); 
    }; 
}); 

문제 해결 : updated fiddle

을

하지만 2 개의 removeClass 라인을 지시문으로 옮기고 대신 jQlite를 사용합니다. 그런 다음 지시자가 DOM을 처리하는 동안 컨트롤러 기능은 목록 관련 작업에 집중할 수 있습니다.