홈>2020-02-01 00:31

javascript - ng-readonly = true 이후 빈 ng- 모델 데이터에 집중

양식 입력이 있습니다. 페이지가로드되면 입력에 "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>

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

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

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

<input autofocus

javascriptangularjs

답변 # 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>

Python2.net

javascript - ng-readonly = true 이후 빈 ng- 모델 데이터에 집중

관련 자료