[解決済み] AngularJS: 部分ビューが表示される前に $viewContentLoaded が起動される
質問
部分ビューのために、通常なら
$(document).ready(function() {...})
例えば、venetリスナーを要素にバインドします。AngularJSと"root"ビューにロードされた部分ビューでは、これが機能しないことは分かっています。
したがって、私は、コントローラにリスナーを追加しました。
$viewContentLoaded
イベントが発生します。リスナーの関数が呼び出されるので、イベントは発生しますが、まるで部分ビューがレンダリングされる前であるかのように私には思えます。リスナーの関数にブレークポイントを設定し、firebugでデバッグしても、要素は表示されませんし、関数内のjquery選択で部分ビューの要素が見つかるわけでもありません。
コントローラはこんな感じです。
angular.module('docinvoiceClientAngularjsApp')
.controller('LoginController', function ($scope, $rootScope) {
$scope.$on('$viewContentLoaded', function(event) {
console.log("content loaded");
console.log($("#loginForm")); // breakpoint here
});
[...]
もしこれが一般的なバグであれば、stackoverflowにもっと多くの投稿があるはずなので、私は何か間違ったことをしているのだと思います。
を使っているので ui-router と ui-view ルーティングファイルの抜粋をお見せします。
angular
.module('docinvoiceClientAngularjsApp', [
'ui.router',
'ngAnimate',
'ngCookies',
'ngResource',
'ngMessages',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider, $stateProvider) {
$stateProvider
.state('login', {
url: '/',
templateUrl: 'components/login/loginView.html',
controller: 'LoginController'
})
.run(['$state', function ($state) {
$state.transitionTo('login');
}])
[...]
よろしくお願いします。ありがとうございます。
UPDATE 1: 以下のようなユースケースで、エラーを剥がしました。loginView.htmlは以下のような感じです。
<div id="loginContainer" style="width: 300px">
<form id="loginForm" ng-submit="login(credentials)" ng-if="session.token == undefined">
[...]
を削除すると、すぐに
ng-if
をdivタグから削除すると、期待通りに動作します。このイベントは DOM がレンダリングされた後に発生するため、jQuery は要素を見つけます。もし
ng-if
がdivタグに付いている場合は、最初に説明したような動作になります。
アップデイト2。
約束した通り、動作するデモを追加しました。
ng-if
ディレクティブを使用します。どなたか正しい方向を教えていただけませんか?ログインフォームにこだわらず、何らかの式に基づいてビューの特定の部分を削除し、部分的なビューが準備された後にJavaScriptを実行したい場合など、他にも多くのユースケースがあります。
動作するデモはこちらでご覧いただけます。 デモ
解決するには?
これはangularのダイジェストサイクルに関連しており、angularがフードの下でどのように動作するか、データバインディングなどに関するものです。これを説明する素晴らしいチュートリアルがあります。
あなたの問題を解決するには、$timeoutを使用します。これは、ng-ifがすでにパースされている場合、次のサイクルでコードを実行します。
app.controller('LoginController', function ($scope, $timeout) {
$scope.$on('$viewContentLoaded', function(event) {
$timeout(function() {
$scope.formData.value = document.getElementById("loginForm").id;
},0);
});
});
修正したデモはこちら http://codepen.io/anon/pen/JoYPdv
しかし、DOM操作にはディレクティブを使用することを強くお勧めします。 以下はその例です。 AngularJSで簡単なドメイン操作 - ボタンをクリックし、input要素にフォーカスを設定する
関連
-
[解決済み] Bootstrapのcollapseが機能しない。ハンバーガーメニューが表示されない。
-
[解決済み] ネストした多次元のjsonオブジェクトの書き方
-
[解決済み] AngularJS 。scope.apply()呼び出し時の$digest already in progressエラーを防ぐ。
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] アップロード前に画像をプレビューする
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJS コントローラにおける 'this' と $scope の比較
-
[解決済み] AngularJSのコントローラからビューにHTMLを挿入する
-
[解決済み] AngularJS テンプレートにおける if else ステートメント
-
[解決済み] AngularJSの部分的なビューに基づいて動的にヘッダーを変更するには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】BootstrapがUncaught Errorを投げる。BootstrapのJavaScriptはjQueryを必要とする【解決済み
-
[解決済み] jQuery onclick が動的に挿入された HTML 要素で発火しない?重複
-
[解決済み] Javascriptでの改行の分割方法
-
[解決済み] 無効な JSON プリミティブ ERROR
-
[解決済み] jQuery - クラスの代わりにIDを追加する
-
[解決済み] jQuery .validate() submitHandler が起動しない
-
[解決済み] jQuery slidetoggleが動作しない?[クローズド]
-
[解決済み] 3桁ごとの数字にカンマを追加
-
[解決済み] フォーム送信のjQueryが動作しない
-
[解決済み] jQueryの再帰性が高すぎる