web-dev-qa-db-ja.com

AngularJS-ngでオートフォーカスを入力-機能しない場合

inputをng-ifで囲むと、非表示にして表示した後、autofocus属性が有効になりません。

コードは次のとおりです。

  <!DOCTYPE html>
<html ng-app>

  <head>
    <script data-require="[email protected]" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-init="view={}; view.show = true">
    <button ng-click="view.show = !view.show">{{view.show ? "hide" : "show"}}</button>
    <div ng-if="view.show">
      <input autofocus />
    </div>
  </body>
</html>

そしてここにプランカーがあります： http://plnkr.co/edit/k7tb3xw5AsBYrhdlr3bA?p=preview

非表示をクリックするだけで、その後ショーでオートフォーカスが機能しないことがわかります！

ではChromeは最初のショーでのみ機能し、[〜＃〜] ff [〜＃〜]および[〜＃〜] ie [〜＃〜]まったく機能していません！

javascriptangularjsinputautofocusangular-ng-if
12
cheziHoyzer

問題は、属性autofocusがAngularディレクティブです。これは ブラウザがサポートする<input>要素の仕様 ではありません。必要に応じてこれは、複数のブラウザで意図したとおりに機能し、[非表示/表示]をクリックするたびにオートフォーカスを行うには、ディレクティブを作成する必要があります。

私はこのディレクティブをすぐに取りました Github Gist 、このディレクティブを作成した mlynch の功績です。

これがあなたのアプリケーションの実例です

angular  
    .module('App', [  
        'utils.autofocus',
    ]);
    
/**
 * the HTML5 autofocus property can be finicky when it comes to dynamically loaded
 * templates and such with AngularJS. Use this simple directive to
 * tame this beast once and for all.
 *
 * Usage:
 * <input type="text" autofocus>
 * 
 * License: MIT
 */
angular.module('utils.autofocus', [])

.directive('autofocus', ['$timeout', function($timeout) {
  return {
    restrict: 'A',
    link : function($scope, $element) {
      $timeout(function() {
        $element[0].focus();
      });
    }
  }
}]);
<!DOCTYPE html>
<html ng-app="App">

  <head  ng-init="view={}; view.show = true">
    <script data-require="[email protected]" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <button ng-click="view.show = !view.show">{{view.show ? "hide" : "show"}}</button>
  </body>
  
  <div ng-if="view.show">
    <input autofocus />
  </div>

    <script src="script.js"></script>
</html>
16
ug_

これにはディレクティブを使用できます。 プランカーデモ

angular.module('myApp', []).directive('focusMe', function($timeout) {
    return {
        scope: {
            focusMeIf:"="
        },
        link: function ( scope, element, attrs ) {
            if (scope.focusMeIf===undefined || scope.focusMeIf) {
                $timeout( function () { element[0].focus(); } );
            }
        }
    };
});

また、その中のfocus-me-if属性で条件を定義することもできます。

それが役に立てば幸い。

3
M. Junaid Salaat