ng-show 후 입력 필드에 포커스 설정

ng-show 후 입력 필드에 포커스 설정

데이터가 로드되면 (이 경우 $resource를 통해) 컨트롤러를 통해 입력 필드의 포커스를 설정할 수 있습니까?

API에서 데이터가 반환될 때까지 ng-show를 통해 입력이 숨겨져 있지만 포커스를 설정할 방법을 찾을 수 없습니다.입력의 ng-model name과 jQuery를 통해 할 수 있다는 것을 의미하는 입력 이름을 알고 있지만 가능하면 Angular를 사용하고 싶습니다.JS웨이

저는 여기서 많은 지시적인 예를 시도했지만, 그것들은 모두 1.2ng-focus 이전이거나, 버튼에서ng-click에 의존하거나(내 경우엔 일어날 수 없는) 동작하지 않는 것 같습니다.
어떤 팁이라도 매우 감사하게 받겠습니다.

이것은 간단한 지시로, 고객에게 도움이 될 수 있습니다.

<input focus-on="!!myResourceData" />

.directive('focusOn',function($timeout) {
    return {
        restrict : 'A',
        link : function($scope,$element,$attr) {
            $scope.$watch($attr.focusOn,function(_focusVal) {
                $timeout(function() {
                    _focusVal ? $element[0].focus() :
                        $element[0].blur();
                });
            });
        }
    }
})

Angular's와 함께 작업하기 위해 답변을 확장했습니다.ng-show그리고.ng-hide

app.directive('focusOnShow', function($timeout) {
    return {
        restrict: 'A',
        link: function($scope, $element, $attr) {
            if ($attr.ngShow){
                $scope.$watch($attr.ngShow, function(newValue){
                    if(newValue){
                        $timeout(function(){
                            $element[0].focus();
                        }, 0);
                    }
                })      
            }
            if ($attr.ngHide){
                $scope.$watch($attr.ngHide, function(newValue){
                    if(!newValue){
                        $timeout(function(){
                            $element[0].focus();
                        }, 0);
                    }
                })      
            }

        }
    };
})

Atribute만 추가하면 됩니다.focus-on-show

<input type="text" ng-show="editing" focus-on-show />

Koolunix의 답변을 바탕으로 입력 요소에 초점을 맞추는 것만을 고려하고 있다면 Focus-on 지시어를 사용하여 요소의 하위 항목인 첫 번째 입력 요소를 찾는 것도 유용할 수 있습니다.

이것은 외부 라이브러리가 지시문과 템플릿을 사용하여 입력 요소를 추상화하는 경우에 유용합니다.

.directive('focusOn', function ($timeout) {
    return {
        restrict: 'A',
        priority: -100,
        link: function ($scope, $element, $attr) {

            $scope.$watch($attr.focusOn,
                function (_focusVal) {
                    $timeout( function () {
                        var inputElement = $element.is('input')
                            ? $element
                            : $element.find('input');

                         _focusVal ? inputElement.focus()
                                   : inputElement.blur();
                    });
                }
            );

        }
    };
});

이 예에서는 기본적으로 숨겨져 있는 검색 박스와 유사한 예를 보여 주기 전에 렌더링해야 하기 때문에 컨트롤러에서 타임아웃을 사용해야 합니다.

HTML:

<input ng-show="vm.isActive" id="searchInputBox" ></input>
<input type="button" ng-click="vm.toggleActiveInactive();">

컨트롤러:

vm.isActive=false;
vm.toggleActiveInactive=toggleActiveInactive; // vm= viewmodel

function toggleActiveInactive() {
          if(vm.isActive==true){
            vm.isActive=false;
          }else{
            vm.isActive=true;

            $timeout(function(){     
              document.getElementById('searchBoxInput').focus()
            }, 10 );

          }
        }

Angular의 다른 버전입니다.이오

import {Directive, ElementRef, Input, OnChanges, SimpleChanges} from '@angular/core';

//Directive to that toggles focus from boolean value set with focusOn
@Directive({
  selector: '[focusOn]'
})
export class FocusOnDirective implements OnChanges {
  @Input('focusOn') setFocus: boolean;

  constructor(private hostElement: ElementRef) {}

  ngOnChanges(changes : SimpleChanges) {
    (!!changes.setFocus && !!changes.setFocus.currentValue) ?
      this.hostElement.nativeElement.focus() :
      this.hostElement.nativeElement.blur();
  }
}

언급URL : https://stackoverflow.com/questions/24415168/setting-focus-on-an-input-field-after-ng-show