AngularJS.如何从控制器组件外部调用控制器功能 [英] AngularJS. How to call controller function from outside of controller component

问题描述

如何从网页的任何位置(控制器组件之外)调用控制器下定义的函数?

当我按下获取"按钮时它工作得很好.但我需要从 div 控制器外部调用它.逻辑是:默认情况下我的 div 是隐藏的.在导航菜单的某个地方，我按下一个按钮，它应该显示()我的 div 并执行获取"功能.我如何才能做到这一点?

我的网页是:

<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>

我的js:

 function MyController($scope) {//默认数据和结构$scope.data = {"firstname" : "尼古拉斯",姓氏":笼子"};$scope.get = function() {$.ajax({url: "/php/get_data.php?",类型:POST"，timeout: 10000,//10 秒获取结果，否则报错.error:function() { alert("临时错误，请重试...");},完成:function(){ $.unblockUI();},beforeSend: function(){ $.blockUI()},成功:功能(数据){json_answer = eval('(' + 数据 + ')');如果(json_answer){$scope.$apply(function () {$scope.data = json_answer;});}}});};$scope.update = function() {$.ajax({url: "/php/update_data.php?",类型:POST"，数据:$scope.data，timeout: 10000,//10 秒获取结果，否则出错.error:function() { alert("临时错误，请重试...");},完成:function(){ $.unblockUI();},beforeSend: function(){ $.blockUI()},成功:功能(数据){}});};}

解决方案

这里是一种从控制器外部调用控制器函数的方法:

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

其中 get() 是来自控制器的函数.

你可以切换

document.getElementById('yourControllerElementID')`

到

$('#yourControllerElementID')

如果您使用的是 jQuery.

另外，如果你的函数意味着改变你视图上的任何东西，你应该调用

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

应用更改.

还有一点，你应该注意的是，作用域是在页面加载后初始化的，所以从作用域外调用方法应该总是在页面加载后完成.否则，您将根本无法到达范围.

更新:

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

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

是的，这实际上是不好的做法，但有时您只需要快速而肮脏地完成工作.

How I can call function defined under controller from any place of web page (outside of controller component)?

It works perfectly when I press "get" button. But I need to call it from outside of div controller. The logic is: by default my div is hidden. Somewhere in navigation menu I press a button and it should show() my div and execute "get" function. How I can achieve this?

My web page is:

<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>

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

解决方案

Here is a way to call controller's function from outside of it:

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

where get() is a function from your controller.

You can switch

document.getElementById('yourControllerElementID')` 

to

$('#yourControllerElementID')

If you are using jQuery.

Also, if your function means changing anything on your View, you should call

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

to apply the changes.

One more thing, you should note is that scopes are initialized after the page is loaded, so calling methods from outside of scope should always be done after the page is loaded. Else you will not get to the scope at all.

UPDATE:

With the latest versions of angular, you should use

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

And yes, this is, in fact, a bad practice, but sometimes you just need things done quick and dirty.

这篇关于AngularJS.如何从控制器组件外部调用控制器功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！