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

Question

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

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

当我按下“get”按钮时它完美地工作。但我需要从div控制器外部调用它。逻辑是：默认情况下我的div是隐藏的。在导航菜单的某处我按下一个按钮，它应该显示（）我的div并执行“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){ }
      });
    };
   }

Answer 1

这是一种从外部调用控制器函数的方法：angular.element(document.getElementById('yourControllerElementID')).scope().get();哪里get()是你的控制器的功能。你可以切换document.getElementById('yourControllerElementID')`至$('#yourControllerElementID')如果你正在使用jQuery。此外，如果您的功能意味着更改View上的任何内容，则应致电angular.element(document.getElementById('yourControllerElementID')).scope().$apply();应用更改。还有一件事，你应该注意的是，在加载页面之后初始化作用域，因此在加载页面之后应该始终在作用域之外调用作用域。否则你根本不会进入范围。更新：使用最新版本的角度，您应该使用angular.element(document.getElementById('yourControllerElementID')).injector().‌get('$rootScope')事实上，这实际上是一种不好的做法，但有时你只需要快速而肮脏的事情。

Answer 2

我在互联网上找到了一个例子。有些人写了这段代码，工作得很好HTML<div&nbsp;ng-cloak&nbsp;ng-app="ManagerApp"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="MainWrap"&nbsp;class="container"&nbsp;ng-controller="ManagerCtrl"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;class="label&nbsp;label-info&nbsp;label-ext">Exposing&nbsp;Controller&nbsp;Function&nbsp;outside&nbsp;the&nbsp;module&nbsp;via&nbsp;onClick&nbsp;function&nbsp;call</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;onClick='ajaxResultPost("Update:Name:With:JOHN","accept",true);'>click&nbsp;me</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>&nbsp;<span&nbsp;class="label&nbsp;label-warning&nbsp;label-ext"&nbsp;ng-bind="customParams.data"></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>&nbsp;<span&nbsp;class="label&nbsp;label-warning&nbsp;label-ext"&nbsp;ng-bind="customParams.type"></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>&nbsp;<span&nbsp;class="label&nbsp;label-warning&nbsp;label-ext"&nbsp;ng-bind="customParams.res"></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="text"&nbsp;ng-model="sampletext"&nbsp;size="60"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/> &nbsp;&nbsp;&nbsp;&nbsp;</div></div>JAVASCRIPTvar&nbsp;angularApp&nbsp;=&nbsp;angular.module('ManagerApp',&nbsp;[]);angularApp.controller('ManagerCtrl',&nbsp;['$scope',&nbsp;function&nbsp;($scope)&nbsp;{$scope.customParams&nbsp;=&nbsp;{};$scope.updateCustomRequest&nbsp;=&nbsp;function&nbsp;(data,&nbsp;type,&nbsp;res)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$scope.customParams.data&nbsp;=&nbsp;data; &nbsp;&nbsp;&nbsp;&nbsp;$scope.customParams.type&nbsp;=&nbsp;type; &nbsp;&nbsp;&nbsp;&nbsp;$scope.customParams.res&nbsp;=&nbsp;res; &nbsp;&nbsp;&nbsp;&nbsp;$scope.sampletext&nbsp;=&nbsp;"input&nbsp;text:&nbsp;"&nbsp;+&nbsp;data;};}]);function&nbsp;ajaxResultPost(data,&nbsp;type,&nbsp;res)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;scope&nbsp;=&nbsp;angular.element(document.getElementById("MainWrap")).scope(); &nbsp;&nbsp;&nbsp;&nbsp;scope.$apply(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;scope.updateCustomRequest(data,&nbsp;type,&nbsp;res); &nbsp;&nbsp;&nbsp;&nbsp;});}演示*我做了一些修改，见原文：font&nbsp;JSfiddle