[解決済み] AngularJSです。コントローラコンポーネントの外からコントローラ関数を呼び出す方法
2022-04-22 12:03:27
質問
コントローラで定義された関数を、Webページの任意の場所(コントローラコンポーネントの外)から呼び出すにはどうしたらよいでしょうか?
ボタンを押すと、完全に動作します。しかし、私はそれをdivコントローラの外から呼び出す必要があります。ロジックは次のとおりです:デフォルトで私のdivは非表示になっています。ナビゲーションメニューのどこかでボタンを押すと、私の div が show() され、 "get" 関数が実行されるはずです。どうすればこれを実現できるでしょうか?
私のウェブページは
<div ng-controller="MyController">
<input type="text" ng-model="data.firstname" required>
<input type='text' ng-model="data.lastname" required>
<form ng-submit="update()"><input type="submit" value="update"></form>
<form ng-submit="get()"><input type="submit" value="get"></form>
</div>
私のjsです。
function MyController($scope) {
// default data and structure
$scope.data = {
"firstname" : "Nicolas",
"lastname" : "Cage"
};
$scope.get = function() {
$.ajax({
url: "/php/get_data.php?",
type: "POST",
timeout: 10000, // 10 seconds for getting result, otherwise error.
error:function() { alert("Temporary error. Please try again...");},
complete: function(){ $.unblockUI();},
beforeSend: function(){ $.blockUI()},
success: function(data){
json_answer = eval('(' + data + ')');
if (json_answer){
$scope.$apply(function () {
$scope.data = json_answer;
});
}
}
});
};
$scope.update = function() {
$.ajax({
url: "/php/update_data.php?",
type: "POST",
data: $scope.data,
timeout: 10000, // 10 seconds for getting result, otherwise error.
error:function() { alert("Temporary error. Please try again...");},
complete: function(){ $.unblockUI();},
beforeSend: function(){ $.blockUI()},
success: function(data){ }
});
};
}
解決方法は?
ここでは、コントローラの外からコントローラの関数を呼び出す方法を紹介します。
angular.element(document.getElementById('yourControllerElementID')).scope().get();
ここで
get()
は、コントローラの関数です。
を切り替えることができます。
document.getElementById('yourControllerElementID')`
へ
$('#yourControllerElementID')
jQueryを使用している場合。
また、その関数がView上の何かを変更することを意味する場合、その関数を呼び出す必要があります。
angular.element(document.getElementById('yourControllerElementID')).scope().$apply();
をクリックして変更を適用します。
もうひとつ、スコープはページが読み込まれた後に初期化されるので、スコープの外からメソッドを呼び出すのは、常にページが読み込まれた後に行う必要があることに注意してください。さもなければ、そのスコープに到達することはできません。
UPDATEしてください。
最新バージョンのangularでは
angular.element(document.getElementById('yourControllerElementID')).injector().get('$rootScope')
そして、そう、これは、実際、そうなのです。 悪しき習慣 しかし、時には、物事を素早く、汚く行うことが必要な場合があります。
関連
-
[解決済み] ページロード時にAngularJSのコントローラ関数を実行する方法は?
-
angularjs統合ueditor入門
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?
-
[解決済み] AngularJSのコントローラからビューにHTMLを挿入する
-
[解決済み] AngularJSでチェックボックスの値のリストにバインドするにはどうすればいいですか?
-
[解決済み] あるAngularJSのコントローラが別のコントローラを呼び出すことはできますか?
-
[解決済み] AngularJSでコントローラを2回実行する場合の対処法
-
[解決済み] 子コントローラから親スコープにアクセスする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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】angularのonLoadとng-initの違いについて
-
[解決済み] AngularJSで$httpリクエスト中にスピナーGIFを表示する?
-
[解決済み] AngularJSのng-showとフェードアニメーション
-
[解決済み] AngularJSのシンプルな "Hello, world "が動作しない。
-
[解決済み] ag-gridの行の追加/削除
-
[解決済み] ajaxリクエスト時にAngularjsのローディング画面が表示される。
-
[解決済み] AngularJsでng-Cloakディレクティブを実際に使用する方法とは?
-
[解決済み] ディレクティブ '...' が要求するコントローラ 'ngModel' が見つかりません。
-
angularjs が src で指定されたコンテンツを iframe 内で正しく表示しない
-
[解決済み] AngularJSのjs関数外からのアクセススコープ