AngularJSはng-repeatレンダリング完了メソッドを待ち受けます

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

プロジェクトの場合、私のページには、以下のスタイルのリスト<ul>要素があります。

実際、 Angularのng-repによって形成されていますが、 htmlのコードは次のとおりです。


<li ng-repeat="for list in lists()" id="{{ list.id }}">{{ list.name }}</li>

下の図では、新しいリストbuttonをクリックすると、新しいlistオブジェクトがlists配列にpushされlists 。このとき、ページは自動的にレンダリングされ、 <li>次のように対応して追加されます:

MyList1常にactiveclass="active" )であることに注意してください。 listを追加active後で新しいlistactiveに追加する必要があります。

最初は、新しいlistオブジェクトをbuttonに対応する関数のlists配列にpushdocument.getElementById使用document.getElementByIdて新しい<li>オブジェクトdocument.getElementById取得し、 class="active"追加class="active" 。取得されたDOMオブジェクトはnullです。検索後、リストオブジェクトがlists後、配列が変更され、すべての<li>が再レンダリングされ、 push完了した直後に新しく追加されたDOMオブジェクトが検出されDOM 。レンダリングは良いので、利用できません。 解決策は:レンダリングが完了した後、 ng-repeatをリッスンするためにAngularJS命令を使用し、レンダリングが完了した後、新しい<li>オブジェクトを取得します。このオンラインには関連するコンテンツがたくさんあります。


myapp.directive('repeatFinish', function ($timeout) {
return {
restrict: "C",
link: function (scope, element, attr) {
if(scope.$last === true){
$timeout(function () {
scope.change_list(element[0]);
}, 10);
}
}
}
});

上記のコードは、 repeatFinishrestrict: "C"という命令を作成しますrestrict: "C"は、命令がDOM class (ハンプフォーム、つまりclass="repeat-finish" )に配置されていることを示し、 scope.$last === trueはレンダリングされたことを示します。この時点で最後のオブジェクトはchange_list関数を実行します(コントローラで定義され、 activeオブジェクトをキャンセルしてから着信DOMオブジェクトをactive設定します)。 element[0]は現在レンダリングされているDOM要素を直接取得できDOM 。 私は$timeoutchange_list10ms後にchange_listを実行しましたが、 change_listを使ってDOM直接見つけることができなかったことが分かりました。


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ