>

양식 입력이 있습니다. 페이지가로드되면 입력에 "ng-readonly = true"속성이 있으며 데이터 만 표시합니다.

두 번 클릭 (ng-dblclick)하면 "ng-readonly"속성이false로 변경되고 입력을 편집 할 수 있습니다. 이 모든 것에 대해, 그것은 정확하게 작동하고 있습니다. 그러나 데이터가 (ng-model = "school.fax") 행 데이터가 비어 있으면초점을 수행하며 입력을 클릭하여 초점을 맞추고 쓰기를 시작해야합니다.

데이터가비어 있지 않은(ng-model = "school.fax"에 값이 있고 서버 API에서 값을 가져 오는 경우) 발생하지 않으며이 경우 올바르게 작동합니다

질문 : 입력 행을 클릭하지 않고 빈 입력에 집중하고 쓰기를 시작하려면 어떻게해야합니까?

코드 :

HTML

<label>
    <input class="inputs"
        type="text"
        ng-readonly="!edit_school_fax"
        ng-dblclick="editSchoolFax(true)"
        ng-model="school.fax"/>
</label>

JS

$scope.editSchoolFax = function(edit) {
    $scope.edit_school_fax = edit;
};

FYI 시도했지만 작동하지 않습니다.

  • 입력 내부에 "자동 초점"추가 와이즈 비즈
  • 이 솔루션과 같은 지시문을 사용하십시오 : LINK
<input autofocus

  • 답변 # 1

    맞춤 지시문 추가

    link(scope, element, attrs) {
           scope.$watch(attrs.someAttrs, (newVal, oldVal) => {
                if (newVal === true && newVal !== oldVal) {
                  $timeout(() => {
                    element
                        .focus()
                        .select();
                });
                }
            });
        },
    
    

  • 답변 # 2

    focus 를 추가하는 사용자 지정 지시문 사용  ngModelController에 대한 메소드 :

    app.directive("inputFormFocus", function() {
      return {
        require: "ngModel",
        link: postLink
      };
      function postLink (scope, elem, attrs, ngModel) {
        console.log("postLink");
        console.log(ngModel);
        ngModel.focus = function() {
          elem[0].focus();
        }
      }
    })
    
    
    사용법
    <form name="form1">
       <input input-form-focus
              name="fax" 
              class="inputs"
              type="text"
              ng-readonly="!edit_school_fax"
              ng-dblclick="editSchoolFax(true)"
              ng-model="school.fax"/>
    </form>
    
    
    $scope.form1.fax.focus();
    
    
    데모

    angular.module("app",[])
    .controller("ctrl",function($scope){
      $scope.editSchoolFax = function(edit) {
        $scope.edit_school_fax = edit;
      };
      $scope.school = { fax: "555-100-1234" };
      $scope.faxFocus = function() {
        $scope.edit_school_fax = true;
        $scope.form1.fax.focus();
      };
    })
    .directive("inputFormFocus", function() {
      return {
        require: "ngModel",
        link: postLink
      };
      function postLink (scope, elem, attrs, ngModel) {
        ngModel.focus = function() {
          console.log(attrs.name + " focus");
          elem[0].focus();
        }
      }
    })
    
    
    <script src="//unpkg.com/angular/angular.js"></script>
      <body ng-app="app" ng-controller="ctrl">
        <form name="form1">
           <input input-form-focus
                  name="fax" 
                  class="inputs"
                  type="text"
                  ng-readonly="!edit_school_fax"
                  ng-dblclick="editSchoolFax(true)"
                  ng-model="school.fax"/>
        </form>
        <button ng-click="faxFocus()">Focus and Edit</button>
      </body>
    
    

  • 이전 swift - BLE 특성 쓰기 값이 때때로 임의의 값으로 이동
  • 다음 docker - 웹 페이지에서 컨테이너 시작