AngularJS。如何从控制器组件外部调用控制器功能

Question

如何从网页的任何位置（控制器组件外部）调用控制器下定义的函数？

当我按下“获取”按钮时，它可以完美运行。但是我需要从div控制器外部调用它。html" target="_blank">逻辑是：默认情况下，我的div是隐藏的。在导航菜单中的某个位置，我按了一个按钮，它应该显示（）我的div并执行“获取”功能。我该如何实现？

我的网页是：

<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){ }
      });
    };
   }

Answer 1

这是从外部调用控制器功能的一种方法：

angular.element(document.getElementById('yourControllerElementID')).scope().get();

get()您的控制器的功能在哪里。

你可以切换

document.getElementById('yourControllerElementID')`

至

$('#yourControllerElementID')

如果您使用的是jQuery。

另外，如果您的函数意味着要更改View上的任何内容，则应调用

angular.element(document.getElementById('yourControllerElementID')).scope().$apply();

应用更改。

还有一点，您应该注意的是，作用域是在页面加载后初始化的，因此，应始终在作用域外加载页面后才从作用域外部调用方法。否则，您将根本无法解决问题。

更新：

使用最新版本的angular，您应该使用

angular.element(document.getElementById('yourControllerElementID')).injector().‌​get('$rootScope')

是的，实际上，这是 一个不好的做法 ，但是有时候您只需要快速而又肮脏地完成工作即可。