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

问题描述

我怎么还可以从网页的任何地方控制之下定义函数（外控制器组件的）？

它完美，当我preSS获取按钮。但是，我需要从DIV控制器外部调用它。其中的逻辑是：默认情况下，我的div是隐藏的。某处在导航菜单我preSS一个按钮，它应该显示（）我的div并执行获取功能。我怎样才能做到这一点？

我的网页是：

 ＆LT; D​​IV NG控制器=myController的＆GT;
  ＆LT;输入类型=文本NG模型=data.firstname要求＆GT;
  ＆LT;输入类型='文本'NG模型=data.lastname要求＆GT;  ＆LT;形式NG提交=更新（）＆GT;＆LT;输入类型=提交值=更新＆GT;＆LT; /表及GT;
  ＆LT;形式NG提交=获得（）＆GT;＆LT;输入类型=提交值=获取＆GT;＆LT; /表及GT;
＆LT; / DIV＆GT;
 

我的JS：

 函数myController的（$范围）{
      //默认数据和结构
      $ scope.data = {
        名字：尼古拉斯
        姓氏：笼子
      };      $ scope.get =功能（）{
        $阿贾克斯（{
           网址：/php/get_data.php？
           键入：POST，
           超时：10000，// 10秒获得结果，否则错误。
           错误：函数（）{警报（临时错误，请重试...）;}，
           完成：函数（）{$ .unblockUI（）;}
           beforeSend：函数（）{$ .blockUI（）}，
           成功：功能（数据）{
            json_answer =的eval（'（'+资料+'）'）;
            如果（json_answer）{
                $范围。$应用（函数（）{
                  $ scope.data = json_answer;
            }）;
            }
        }
    }）;
  };  $ scope.update =功能（）{
    $阿贾克斯（{
        网址：/php/update_data.php？
        键入：POST，
        数据：$ scope.data，
        超时：10000，// 10秒获得结果，否则错误。
        错误：函数（）{警报（临时错误，请重试...）;}，
        完成：函数（）{$ .unblockUI（）;}
        beforeSend：函数（）{$ .blockUI（）}，
        成功：功能（数据）{}
      }）;
    };
   }
 

解决方案

下面是一个方法来调用它的外面控制器的功能：

  angular.element（的document.getElementById（'yourControllerElementID'））范围（）获得（）。
 

其中，的get（）是从你的控制器功能。

您可以切换

 的document.getElementById（'yourControllerElementID'）`
 

到

  $（'＃yourControllerElementID'）
 

如果您正在使用jQuery。

此外，如果你的函数是指View的任何改变，你应该叫

  angular.element（的document.getElementById（'yourControllerElementID'））范围（）$适用（）。
 

以应用更改。

还有一件事，你应该注意的是页面加载后范围被初始化，因此调用从范围以外的方法页面加载后，应始终做到。否则你不会得到的范围内的。

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.

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