1. ホーム
  2. angularjs

[解決済み] 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')

そして、そう、これは、実際、そうなのです。 悪しき習慣 しかし、時には、物事を素早く、汚く行うことが必要な場合があります。