AngularJS - 私は私の<code>input</code><code>ng-if</code>で囲むときは非表示にした後、

作業とautofocus属性が有効になりません表示されませNG-場合と入力オートフォーカス：ここAngularJS - 私は私の<code>input</code><code>ng-if</code>で囲むときは非表示にした後、

コードです：

<!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

hideをクリックすると表示され、その後でオートフォーカスが動作しないことがわかります！クロームで

はFFとIEにそれがすべてで働いていない、最初のショーにのみ取り組んでいます！

出典

2016-03-28 cheziHoyzer

この問題は、属性autofocusがAngularディレクティブではありません。それはbrowser supported specification of the <input> elementです。これを複数のブラウザーで意図したとおりに機能させ、非表示/表示をクリックするたびに自動フォーカスを実行するには、ディレクティブを作成する必要があります。

私はこの指令を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>

出典

2016-03-28 10:13:05

あなたの解決策に一つのことを追加したいと思います。 'abc-autofocus'を' abc-autofocus'として 'directive（...） 'に' abcAutofocus'として登録すると、純粋なHTMLやAngularディレクティブがどのソリューションを使うのか混乱することがありません。 –

Greaaaaaat溶液。ありがとう –

-1

最初にdivをラップする必要があり、body要素内の内容です。あなたはそれを外に持っています。それを修正してください。

入力要素は空白であってはならず、時には動作しないことがあります。 の名前とのような属性をいくつか追加してください。type = "text"または適切です。これはhtml5機能であり、<！DOCTYPE html>で始まる必要があります。

注意してください：The autofocus attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.visit here for more details

出典

2016-03-28 10:09:48

の実施例では、これはIE11でテスト問題、ではありません。それをテストすることができます。それは動作していません – cheziHoyzer

あなたはこのためにディレクティブを使用することができます。 Plunker Demo

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属性で、その中に条件を定義することができます。

希望します。

出典

2016-03-28 10:10:47

AngularJS - 私は私の<code>input</code><code>ng-if</code>で囲むときは非表示にした後、

答えて

関連する問題