如何从网页的任何位置(控制器组件外部)调用控制器下定义的函数?
当我按下“获取”按钮时,它工作得很好。但我需要从 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){ } }); }; }
这是一种从外部调用控制器功能的方法:
angular.element(document.getElementById('yourControllerElementID')).scope().get();
get()您的控制器的功能在哪里。
get()
你可以切换
document.getElementById('yourControllerElementID')`
至
$('#yourControllerElementID')
如果您使用的是 jQuery。
此外,如果您的功能意味着更改视图上的任何内容,您应该调用
angular.element(document.getElementById('yourControllerElementID')).scope().$apply();
应用更改。
还有一件事,你应该注意的是,作用域是在页面加载之后初始化的,所以从作用域之外调用方法应该总是在页面加载之后完成。否则,您将根本无法到达范围。
更新:
使用最新版本的角度,您应该使用