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 ng-cloak ng-app="ManagerApp">
    <div id="MainWrap" class="container" ng-controller="ManagerCtrl">
       <span class="label label-info label-ext">Exposing Controller Function outside the module via onClick function call</span>
       <button onClick='ajaxResultPost("Update:Name:With:JOHN","accept",true);'>click me</button>
       <br/> <span class="label label-warning label-ext" ng-bind="customParams.data"></span>
       <br/> <span class="label label-warning label-ext" ng-bind="customParams.type"></span>
       <br/> <span class="label label-warning label-ext" ng-bind="customParams.res"></span>
       <br/>
       <input type="text" ng-model="sampletext" size="60">
       <br/>
    </div></div>

JAVASCRIPT

var angularApp = angular.module('ManagerApp', []);angularApp.controller('ManagerCtrl', ['$scope', function ($scope) {$scope.customParams = {};$scope.updateCustomRequest = function (data, type, res) {
    $scope.customParams.data = data;
    $scope.customParams.type = type;
    $scope.customParams.res = res;
    $scope.sampletext = "input text: " + data;};}]);function ajaxResultPost(data, type, res) {
    var scope = angular.element(document.getElementById("MainWrap")).scope();
    scope.$apply(function () {
    scope.updateCustomRequest(data, type, res);
    });}

演示

*我做了一些修改，见原文：font JSfiddle