私はこれを持っている私のコードの場所を持っています：
<input data-ng-disabled="SOME_SCOPE_VARIABLE" />
私もこのように使用できるようにしたいと思います：
<input data-ng-autofocus="SOME_SCOPE_VARIABLE" />
またはさらに良いことに、ng-styleがどのように行われるかを模倣します。
<input data-ng-attribute="{autofocus: SOME_SCOPE_VARIABLE}" />
これはAngularJSの現在のバージョンに存在しますか？コードの中に、AngularJSがサポートするすべての属性を取得するBOOLEAN_ATTRがあることに気づきました。バージョンを変更したり、更新を忘れたりすることを恐れて、これを変更したくありません。
更新：AngularJSに、フォーカスで式を評価するディレクティブngFocusが追加されましたが、完全を期すためにここで説明します。
AngularJSの現在のバージョンにはフォーカスディレクティブがありませんが、ロードマップにあります。偶然にも、私たちは昨日メーリングリストでこれについて話していました、そして私はこれを思いつきました：
angular.module('ng').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 );
}
});
}
};
});
あなたが要求したように、これはスコープ変数で機能します：
<input type="text" ng-focus="isFocused" ng-focus-lost="loseFocus()">
これがフィドルです：http：//jsfiddle.net/ANfJZ/39/
これは、組み込みのngAttr属性バインディングを使用して行うことができます。
<input ng-attr-autofocus="{{SOME_SCOPE_VARIABLE}}">
オートフォーカス属性は、が定義されている場合SOME_SCOPE_VARIABLEは追加され（定義されている場合でもfalse）、が定義されている場合は削除されundefinedます。だから私は偽の値を強制しますundefined。
$scope.SOME_SCOPE_VARIABLE = someVar || undefined;
このディレクティブはトリックを行う必要があります：
angular.module('utils.autofocus', [])
.directive('autofocus', ['$timeout', function($timeout) {
return {
restrict: 'A',
scope: {'autofocus':'='}
link : function($scope, $element) {
$scope.$watch 'autofocus', function(focus){
if(focus){
$timeout(function() {
$element[0].focus();
});
}
}
}
}
}]);
scope.doFocus = function () {
$timeout(function () {
document.getElementById('you_input_id').focus();
});
};
このようなディレクティブを作成します
.directive('autoFocus', ['$timeout', function ($timeout) {
return {
restrict: 'A',
link: function ($scope, $element) {
$timeout(function () {
$element[0].focus();
});
}
}
<input type="text" auto-focus class="form-control msd-elastic" placeholder="">
私がしたことは、入力に通常のオートフォーカスを使用することです。<input autofocus>
次に、Angularの準備ができたら、オートフォーカスを使用して最初に表示される入力にフォーカスを設定します。
angular.element(document).ready(function() {
$('input[autofocus]:visible:first').focus();
});
お役に立てれば。
次のような2つのカスタムディレクティブを使用して実行しました。
(function(angular) {
'use strict';
/* @ngInject */
function myAutoFocus($timeout) {
return {
restrict: 'A',
link: function(scope, element) {
$timeout(function() {
element[0].focus();
}, 300);
}
};
}
function myFocusable() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var focusMethodName = attrs.myFocusable;
scope[focusMethodName] = function() {
element[0].focus();
};
}
};
}
angular
.module('myFocusUtils', [])
.directive('myAutoFocus', myAutoFocus)
.directive('myFocusable', myFocusable);
}(angular));
要素に属性my-auto-focusを追加すると、300ミリ秒後にフォーカスを受け取ります。フォーカスを設定する前に他の非同期コンポーネントをロードできるように、値を0ではなく300に設定しました。
属性my-focusableは、現在のスコープに関数を作成します。この関数は、呼び出されたときに要素にフォーカスを設定します。スコープ内に何かが作成されるため、何かをオーバーライドしないように注意してください。
このように、Angularのダイジェストサイクル（）に何かを追加する必要はなくwatch、ビューで完全に追加できます。
<input my-focusable="focusOnInput"></input>
<button ng-click="focusOnInput()">Click to focus</button>
myFocusableディレクティブを表示するためにJSFiddleを作成しました：http： //jsfiddle.net/8shLj3jc/
なんらかの理由で、myAutoFocusディレクティブはJSFiddleでは機能しませんが、私のページでは機能します。
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<div ng-repeat="x in names">
<input ng-attr-focus={{$first}} value="{{x.name + ', ' + x.country }}" />
</div>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('namesCtrl', function($scope) {
$scope.names = [
{name:'x1',country:'y1'},
{name:'x2',country:'y2'},
{name:'x3',country:'y3'}
];
});
myApp.directive("focus", function(){
return {
restrict: "A",
link: function link(scope, element, attrs) {
if(JSON.parse(attrs.focus)){
element[0].focus();
}
}
};
});
</script>
</body>
</html>
私のユースケースの1つに対して、上記のカスタムディレクティブを作成しました。
JSON.parseは、HTMLから返された文字列「true」をJSでブール値trueに解析するために使用されます。
if条件にattrs.focus==="true"を使用する別の方法。
したがって、$ timeoutがなければ、次のようにオートフォーカスを使用することもできます-
<input type="text" ng-show="{{condition}}" class='input-class'></input>
angular.element(document).ready(function(){
angular.element('.input-class')[0].focus();
});
上記の他の埠頭を組み合わせる：
JSコード：
myApp.directive('ngAutofocus', ['$timeout', function ($timeout) {
var linker = function ($scope, element, attrs) {
$scope.$watch('pageLoaded', function (pageLoaded) {
if (pageLoaded) {
$timeout(function () {
element[0].focus();
});
}
});
};
return {
restrict: 'A',
link: linker
};
}]);
HTML：
<input type="text" ng-model="myField" class="input-block-level edit-item" ng-autofocus>
ページの最初のロードメソッドからpageLoadedをtrueに設定します。
var loadData = function () {
..
return $http.get(url).then(function (requestResponse) {
$scope.pageLoaded = true;
......
}