AngularJS。如何從控制器組件外部調(diào)用控制器功能如何在網(wǎng)頁的任何位置（控制器組件之外）調(diào)用控制器下定義的函數(shù)？當(dāng)我按下“get”按鈕時(shí)它完美地工作。但我需要從div控制器外部調(diào)用它。邏輯是：默認(rèn)情況下我的div是隱藏的。在導(dǎo)航菜單的某處我按下一個(gè)按鈕，它應(yīng)該顯示（）我的div并執(zhí)行“get”功能。我怎么能做到這一點(diǎn)？我的網(wǎng)頁是：<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){ }
});
};
}
2 回答
一只名叫tom的貓
TA貢獻(xiàn)1906條經(jīng)驗(yàn) 獲得超3個(gè)贊
這是一種從外部調(diào)用控制器函數(shù)的方法：
angular.element(document.getElementById('yourControllerElementID')).scope().get();哪里get()是你的控制器的功能。
你可以切換
document.getElementById('yourControllerElementID')`至
$('#yourControllerElementID')如果你正在使用jQuery。
此外，如果您的功能意味著更改View上的任何內(nèi)容，則應(yīng)致電
angular.element(document.getElementById('yourControllerElementID')).scope().$apply();應(yīng)用更改。
還有一件事，你應(yīng)該注意的是，在加載頁面之后初始化作用域，因此在加載頁面之后應(yīng)該始終在作用域之外調(diào)用作用域。否則你根本不會(huì)進(jìn)入范圍。
更新：
使用最新版本的角度，您應(yīng)該使用
angular.element(document.getElementById('yourControllerElementID')).injector().?get('$rootScope')事實(shí)上，這實(shí)際上是一種不好的做法，但有時(shí)你只需要快速而骯臟的事情。
揚(yáng)帆大魚
TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超9個(gè)贊
我在互聯(lián)網(wǎng)上找到了一個(gè)例子。
有些人寫了這段代碼，工作得很好
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
- 2 回答
- 0 關(guān)注
- 807 瀏覽
添加回答
舉報(bào)
0/150
提交
取消