angularjs在显示时将焦点设置在输入上答案

【问题标题】：angularjs set focus on input when showedangularjs在显示时将焦点设置在输入上
【发布时间】：2016-07-20 06:49:33
【问题描述】：

  <div class="information-box-header" ng-show="!item.editProductName" ng-click="editProductName($event, item)">
    {{item.ProductName}}
    <div class='door-price'>{{item.Price}} $</div>
</div>
<div class="information-box-header" ng-show="item.editProductName" >
    <input type="text" ng-model="item.ProductName" id="{{item.Id}}" value="{{item.ProductName}}" />
    <div class='door-price'>{{item.Price}} $</div>
</div>

当我单击第一个 div 时，我希望显示第二个 div 并聚焦输入。当焦点丢失时，我希望它变回来，以便显示第一个 div。我如何在角度中使用焦点？尝试使用 ng-focus 但由于输入未立即显示而不起作用？

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

您可以尝试使用$timeout 服务将焦点设置在第二个div。

【讨论】：

【解决方案2】：

试试这个，它的工作原理

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.item = {
    price:23,
    editProductName:false,
    Id:1,
    ProductName:''
    
  }
  $scope.onEdit = function(){
    $scope.item.editProductName = true;
  }
  $scope.onFocus = function(){
     console.log('onf');
  }
  $scope.onBlur = function(){
   $scope.item.editProductName = false;
  }
});

app.directive('ngFocus', function($timeout) {
    return {
        link: function ( scope, element, attrs ) {
            scope.$watch( attrs.ngFocus, function ( val ) {
                if ( angular.isDefined( val ) && val ) {
                    $timeout( function () { element[0].focus(); } );
                }
            }, true);
            
            element.bind('blur', function () {
                if ( angular.isDefined( attrs.ngFocusLost ) ) {
                    scope.$apply( attrs.ngFocusLost );
                    
                }
            });
        }
    };
});

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js@1.4.x"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="plunker" ng-controller="MainCtrl">
      <div class="information-box-header" ng-show="!item.editProductName" ng-click="editProductName($event, item)">
    {{item.ProductName}}
    <div class='door-price'>{{item.Price}} $</div>
</div>
<div class="information-box-header" ng-show="item.editProductName" >
    <input type="text" ng-focus="item.editProductName"  ng-blur="onBlur()" ng-model="item.ProductName" id="{{item.Id}}" value="{{item.ProductName}}" />
    <div class='door-price'>{{item.Price}} $</div>
</div>
<button ng-click="onEdit()"  ng-show="!item.editProductName">Edit</button>
  </body>

</html>

我使用来自here的指令聚焦到文本框

【讨论】：