AngularJS。如何从控制器组件外部调用控制器函数
AngularJS。如何从控制器组件外部调用控制器函数
提问于 2013-05-23 16:45:00
如何从网页的任何地方(控制器组件外)调用控制器下定义的函数？
当我按下"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){ }
});
};
}回答 7
Stack Overflow用户
发布于 2016-05-10 20:03:08
在angular 1.5.2中，解决方案angular.element(document.getElementById('ID')).scope().get()停止了对我的工作。有人在评论中提到，这在1.4.9中也不起作用。我通过将作用域存储在全局变量中来修复它：
var scopeHolder;
angular.module('fooApp').controller('appCtrl', function ($scope) {
$scope = function bar(){
console.log("foo");
};
scopeHolder = $scope;
})来自自定义代码的调用：
scopeHolder.bar()如果您想将作用域限制为仅此方法。将整个范围的暴露降到最低。使用下面的技巧。
var scopeHolder;
angular.module('fooApp').controller('appCtrl', function ($scope) {
$scope.bar = function(){
console.log("foo");
};
scopeHolder = $scope.bar;
})来自自定义代码的调用：
scopeHolder()Stack Overflow用户
发布于 2015-02-03 14:34:29
Dmitry的回答很好用。我刚刚用同样的技术做了一个简单的例子。
jsfiddle：http://jsfiddle.net/o895a8n8/5/
<button onclick="call()">Call Controller's method from outside</button>
<div id="container" ng-app="" ng-controller="testController">
</div>。
function call() {
var scope = angular.element(document.getElementById('container')).scope();
scope.$apply(function(){
scope.msg = scope.msg + ' I am the newly addded message from the outside of the controller.';
})
alert(scope.returnHello());
}
function testController($scope) {
$scope.msg = "Hello from a controller method.";
$scope.returnHello = function() {
return $scope.msg ;
}
}Stack Overflow用户
发布于 2013-05-23 17:14:16
这可能是值得考虑的，如果你的菜单没有任何相关的范围是正确的方式。这并不是真正的角度。
但是，如果您需要这样做，那么您可以通过将函数添加到$rootScope，然后在这些函数中使用$broadcast发送事件来完成此操作。然后，您的控制器使用$on侦听这些事件。
如果你的菜单没有作用域，需要考虑的另一件事是，如果你有多个路由，那么所有的控制器都必须有自己的upate和get函数。(假设您有多个控制器)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16709373
复制相关文章
相似问题