6

AngularJS を ng-repeat ディレクティブと共に使用して、オブジェクトの配列をリストとして表示します。

<li ng-repeat="cue in cues" class="form-inline">
    <input type="text" ng-model="cues[$index].text" class="input-xlarge"/>
    {{cue.isNewest}}
</li>

プロパティ "isNewest" は、配列の 1 つの要素のみで true です。その項目のテキスト入力にキーボードフォーカスを設定したいと思います。どうすればAngularJSでそれを行うことができますか?

4

4 に答える 4

24

attrs。$observeを使用する別のディレクティブ実装を次に示します。

myApp.directive('focus', function () {
  return function (scope, element, attrs) {
    attrs.$observe('focus', function (newValue) {
      newValue === 'true' && element[0].focus();
      // or, if you don't like side effects (see @Christophe's comment):
      //if(newValue === 'true')  element[0].focus();
    });
  }
});

補間されたDOM属性値（つまり、{{cue.isNewest}}）は常に文字列に評価されるため、理由はキーワードではなくnewvalue文字列と比較されることに注意してください。'true'true

HTML：

<input type="text" ng-model="cues[$index].text" focus="{{cue.isNewest}}"
 class="input-xlarge" />{{cue.isNewest}}

このフィドルには、配列内のどのアイテムにフォーカスを設定するかを切り替えるメソッドもあります。

jQueryをロードしない場合、jqLit​​eにはfocus（）メソッドがないためelement[0].focus()、リンク関数で使用する必要があることに注意してください（ではありません）。element.focus()

于 2013-01-07T23:27:42.270 に答える
4

DOM を操作するため、ディレクティブを作成する必要があります。何かのようなもの：

var app = angular.module('quirli', []);
app.directive('focusable', function() {
    return {
        restrict: 'A',
        scope: {
            focusable: '@'
        },
        link: function(scope, elm, attrs) {
            scope.$watch('focusable', function (value) {
                if (value) {
                    elm[0].focus();
                }
            });
        }
    };
});

HTML:

<html ng-app="quirli" lang="en">
....  
<input type="text" ng-model="cues[$index].text" class="input-xlarge" focusable="{{cue.isNewest}}"/>

注:未テスト。

于 2013-01-07T21:54:37.807 に答える
1

AngularJS には、フォーカスを受け取るための特別な機能はありません。これは、コントローラーの $watch だけでなく、ディレクティブでも解決できます。

于 2013-01-07T21:44:16.483 に答える
1

他の提案された回答は、私にとっては 9/10 回問題なく機能しますが、すぐに「$digest が既に進行中」の楽しみを実行していました。

asgoth と Mark Rajcok による以前の回答を少し修正したバージョンがあります。基本的に、$timeout 依存関係を挿入し、focus() 呼び出しを timeout(...) 内に配置します。IIRC ng-focus も同じことを行います。

var app = angular.module('cgeers', []);
app.directive('focus', ["$timeout", function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(attrs.focus, function (value) {
                if (value) {
                    $timeout(function() { element[0].focus(); });
                }
            });
        }
    };
}]);
于 2013-12-19T15:15:46.317 に答える