anglejs에서 대체 할 때 템플리트 입력 필드에 초점을 맞추는 방법

node.js 및 angularjs 여기 noob을 참조하십시오.anglejs에서 대체 할 때 템플리트 입력 필드에 초점을 맞추는 방법

내 스택에 meanjs를 사용하고 있습니다.

템플릿을 사용하여 입력 필드를 추가하기 위해 바꾸기 기능을 설정했지만 템플릿이 변경되면 자동으로 입력 필드에 포커스를 설정하는 방법을 배울 수 없습니다. 내 지시문은 다음과 같습니다 :

angular.module('core').directive("clickToEdit", function(){ 
    var editorTemplate = '<div class="click-to-edit">' + 
     '<div data-ng-click="enableEditor()" data-ng-hide="view.editorEnabled">' + 
      '{{value}} ' + 
     '</div>' + 
     '<div data-ng-show="view.editorEnabled">' + 
      '<input data-ng-model="view.editableValue" data-ng-blur="disableEditor()" />' + 
     '</div>' + 
    '</div>'; 

    return { 
     restrict: "A", 
     replace: true, 
     template: editorTemplate, 
     scope: { 
      value: "=clickToEdit", 
     }, 
     controller: function($scope) { 
      $scope.view = { 
       editableValue: $scope.value, 
       editorEnabled: false 
      }; 

      $scope.enableEditor = function() { 
       $scope.view.editorEnabled = true; 
       $scope.view.editableValue = $scope.value; 
      }; 

      $scope.disableEditor = function() { 
       $scope.view.editorEnabled = false; 
      }; 

      $scope.save = function() { 
       $scope.value = $scope.view.editableValue; 
       $scope.disableEditor(); 
      }; 
     } 
    }; 
});

출처

2014-11-17 Finglish

간단한 JS와 같은 요소에 focus() 함수를 사용할 수 있습니다. 하나의 트릭 : 템플릿 렌더링을 허용하기 위해 $ timeout에 포장했습니다.

<!doctype html> 
 
<html> 
 
    <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 
 
    </head> 
 
    <body ng-app="plunker" ng-controller="MainCtrl"> 
 
     <div click-to-edit="value"></div> 
 
    </body> 
 
    <script> 
 
     var app = angular.module('plunker', []); 
 
     app.controller('MainCtrl', ['$scope', function($scope) { 
 
      $scope.value="Click to edit"; 
 
     }]).directive("clickToEdit", function(){ 
 
      var editorTemplate = '<div class="click-to-edit">' + 
 
       '<div data-ng-click="enableEditor()" data-ng-hide="view.editorEnabled">' + 
 
        '{{value}} ' + 
 
       '</div>' + 
 
       '<div data-ng-show="view.editorEnabled">' + 
 
        '<input data-ng-model="view.editableValue" data-ng-blur="disableEditor()" />' + 
 
       '</div>' + 
 
      '</div>'; 
 

 
      return { 
 
       restrict: "A", 
 
       replace: true, 
 
       template: editorTemplate, 
 
       scope: { 
 
        value: "=clickToEdit", 
 
       }, 
 
       controller: function($scope, $element, $timeout) { 
 
        $scope.view = { 
 
         editableValue: $scope.value, 
 
         editorEnabled: false 
 
        }; 
 

 
        $scope.enableEditor = function() { 
 
         $scope.view.editorEnabled = true; 
 
         $scope.view.editableValue = $scope.value; 
 
         var input = $element.find('input'); 
 
         $timeout(function() { 
 
          input[0].focus(); 
 
         }); 
 
        }; 
 

 
        $scope.disableEditor = function() { 
 
         $scope.view.editorEnabled = false; 
 
        }; 
 

 
        $scope.save = function() { 
 
         $scope.value = $scope.view.editableValue; 
 
         $scope.disableEditor(); 
 
        }; 
 
       } 
 
      }; 
 
     }); 
 
    </script> 
 
</html>

출처

2014-11-17 21:31:45

anglejs에서 대체 할 때 템플리트 입력 필드에 초점을 맞추는 방법

답변

관련 문제