問題タブ [ng-dialog]

こんにちは、次のモジュールをインストールしましたhttps://github.com/likeastore/ngDialog

それはうまく機能しますが、コントローラーからダイアログボックスを開く方法を取得できません。

しかし、コンソールエラーが発生するため、期待どおりに機能しません: ngDialog is not defined。

私は AngularJs とngDialogの両方が初めてで、 ngDialog モーダルとコントローラーの間でバインディングを機能させるのに問題があります。を指定してコントローラーのスコープをモーダルに挿入し{ scope: $scope }ました。コントローラーで定義されたメソッドにアクセスできますが、コントローラーで定義されたモデルへのバインディングが正しく機能していません。

モーダルを使用して、ユーザーがアドレスを組織に追加できるようにしようとしています。

ここにmain.jsがあります

これが organization.html です。

add-address.html は次のとおりです。

モーダルは親スコープにアクセスできます。モーダルに追加された新しいアドレスを含め、組織全体を正常に呼び出し$scope.saveAddress()てログに記録します。console.log($scope.organization)しかし、新しいアドレスはng-repeatorganization.htmlに反映されず、複数のアドレスを次々と追加すると、ログには最新のものしか表示されません。

実験として、この関数を main.js に追加しました。

一致するように organization.html の [アドレスの追加] ボタンを変更しました。

[Add an Address] をクリックすると、新しいアドレスがすぐに に表示され、ng-repeat各コンソール ログには、最新のアドレスだけでなく、すべてのアドレスが含まれます。

これら2つの方法の違いは何ですか? コントローラーのスコープ内のメソッドを使用して変更が行われたときに、モーダルで行われた変更が「期限切れ」になるのはなぜですか?

Ng Dialogにhttps://github.com/likeastore/ngDialog#apiを使用して います。

タイトル、メッセージ、表示するボタンを含むダイアログ ボックスを表示したかったのです。

前もって感謝します。

このngDialogモジュールをAngularJsで動作させることができなかったので、どこで間違ったのかヒントを探しています。

abc.json という名前のJsonファイル

角度コントローラー

そして最後に HTML

これがJsFiddleですが、別のエラーで JsFiddle でも動作させることができませんでした。

value私のローカル マシンでは、DOM がロードされ、JSON ファイルから正しく表示されてもエラーは発生しません。ただし、リンクをクリックすると、次のエラーが表示されます。

だから私はngDialogがロードされていないか、何か他のものだと推測しています。

ng-dialogがポップアップすると 、このエラーが発生します。ダイアログをポップする関数は次のとおりです。

ここにコントローラーのコードがあります：

ポップアップの結果は次のとおりです。

ノート ：

• ダイアログの外で問題なく動作するコントローラーでテストしました。
• これは、ngDialog ポップ (110 行目) で使用されるコントローラーの「公式」の例(202 行目) です。
• ここに記載されているように、すでにjsファイルをindex.htmlに追加しました

ngDialog.open でダイアログを作成するコントローラーがあります。scope:$scope を割り当て、ポップアップ $dialog で ng-model を使用してスコープ変数を設定します。ただし、コントローラの $scope には値が設定されていません。ng-click 関数は $scope 内の関数を呼び出すことができます。

こことgithubでかなり検索し、ドキュメントを読み、プロジェクトのgithubで提供されているすべての例を操作しました。

以下の JS Fiddles で説明しています。これは、scope:$scope が .open() のように見えるものではないことを示しています。これは一方向バインディングであり、$scope には戻りません。.openConrm() は期待どおりの動作をしているようです。

ngDialog.open() - http://jsfiddle.net/s1ca0h9x/ (修正済み!!期待どおりに動作します)

ngDialog.openConfirm() - http://jsfiddle.net/tbosLoa9/ (期待どおりに動作します)

});

$rootScope.$apply()ラッピング呼び出し (SDK.api) によってラップされる関数があります。

実際、これは Facebook JS SDK (プレーンな FB オブジェクトではない) のラッパーであり、そのような関数は のコンテキストで呼び出されます$rootScope.$apply()。$scope.$apply()そのような関数の最後でを使用するとエラーが発生するため、これを確認でき"inprog"ます (つまり、 への呼び出し$apply内で呼び出すことはできません$apply)。

コード内のこの$scopeオブジェクト (つまり、ここに記述したコード チャンク) は、ngDialogプラグイン用に作成したコントローラーに属しています。ng-dialog は次のようになります。

$scopeinはメインコントローラーからのscope: $scopeスコープです (私のアプリにはコントローラーが 1 つしかありません - 大きすぎません)。

したがって、次のように言えます:$rootScopeは$scopeメイン コントローラーの親であり、同時に の の親でも$scopeあります。ngDialog$scope

grandchild$scopeでは、formデータが更新されます。

url + 'partials/dialog-form.html'そして、実際に存在してレンダリングされるテンプレートがあります。内容は次のとおりです（不要なコードは省略します）。

の値を仮定するとng-submit、ng-repeat存在します。

私の問題: のフィールドにng-model値が入力されていません$scope.form。

私の質問：何が間違っていますか？フォームは正常に機能し、サーバー側のデータは正常に受信されます。*** での私の唯一の問題は、これらのフィールドが$rootScope.$apply呼び出されたときに反映されないことです-Facebook から事前に入力されたそのようなフィールドが必要です (Facebook からそのようなデータを取得するのに問題はありません: $window.console.log）。

付録の編集: API 呼び出し

問題

ng-repeat ディレクティブが新しい​​配列の追加を追跡できないことがわかりました。
私の例では、新しい配列は「options」です。
ディレクティブは、ng-dialog (サードパーティ ライブラリ) を使用して表示されるテンプレートの一部です。
ダイアログボックスを閉じて再度開くと、閉じる前に行った変更が ng-repeat に反映されます。

$scope.$apply(); を試しました しかし、すでに実行されているという警告が表示されます。

アップデート ++

私が最終的に使用した解決策は、最初にその配列の存在を確認する関数を ng-init に追加することでした。存在しない場合は、それを作成してから新しい変数に割り当てました。

より詳細な例を次に示します。
この jsFiddle を作成すると、問題が ng-include/ng-repeat 内にあることが指摘されました。これがなくても問題ありません。 http://jsfiddle.net/20mobk2h/56/
http://jsfiddle.net/20mobk2h/61/

ng-repeat は、存在する場合と存在しない場合があるオプションと呼ばれる配列でループします。

次の方法で新しいオプションを追加します。