Question

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

当我点击第一个div时，我希望第二个div显示并且输入要聚焦。当焦点丢失时，我希望它改回来，以便显示第一个div。我如何在角度中使用焦点？尝试使用ng-focus但由于输入没有立即显示而无法正常工作？

Answer 1

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

Answer 2

试试这个，它的工作

<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                        <label class="col-md-4 control-label">E-Mail Address</label>

                        <div class="col-md-6">
                            <input type="email" class="form-control" name="email" value="{{ old('email') }}">

                            @if ($errors->has('email'))
                            <span class="help-block">
                                <strong>{{ $errors->first('email') }}</strong>
                            </span>
                            @endif
                        </div>
                    </div>

                    <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                        <label class="col-md-4 control-label">Password</label>

                        <div class="col-md-6">
                            <input type="password" class="form-control" name="password">

                            @if ($errors->has('password'))
                            <span class="help-block">
                                <strong>{{ $errors->first('password') }}</strong>
                            </span>
                            @endif
                        </div>
                    </div>

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 );
                    
                }
            });
        }
    };
});

关注焦点到文本框我使用了来自here

的指令

angularjs在显示时将注意力集中在输入上

2 个答案: