從外部調用AngularJS控制器函數
[英]Calling an AngularJS controller function from outside of it
問題描述
我有以下代碼：
app.controller('MatrixExpertCtrl', function($scope,$http){
$scope.PassedMatrix=[];
$scope.GetMatrixFromServer=function(){
$http.get("http://localhost:3000/getmatrixfromdb").success(function(resp){
alert("The matrix grabbed from the server is: " + resp[0].ans);
$scope.PassedMatrix.push(resp[0].ans);
});
};
$scope.DispSize=function(){
alert("testing");
alert("The size is "+$scope.PassedMatrix[0].size) ;
};
//$scope.GetMatrixFromServer();
});
現在，假設在HTML中，我有這樣的東西：
<div class="col-sm-3 col-md-3 col-lg-3">
<div class="text-center">
<h3>Example Survey</h3>
<p>example paragrah</p>
<p>More random text</p>
<p>ending the paragraphs</p>
<button id="updmat" ng-click="DispSize();" type="button" class="btn btn-default">Updates</button>
</div>
//Much more code
<div id="body2">
<div class="col-sm-6 col-md-6 col-lg-6" style="background-color:#ecf0f1;">
<div ng-controller="MatrixExpertCtrl" ng-app="app" data-ng-init="GetMatrixFromServer()">
<div class="text-center">
含義：
是否可以從同一控制器的范圍之外調用在控制器內部定義的函數？
我之所以需要它，是因為該函數正在以非常非常簡單的方式操作由控制器擁有的共享對象（例如，單擊按鈕會更改給定元素的顏色）。
我在進行這項工作時遇到麻煩，我們將不勝感激。
我認為將某些數據結構聲明為全局數據可以幫助我解決此問題，但是，我想避免這樣做，因為，除了這是一種不好的做法之外，將來還會給我帶來更多問題。
2 個解決方案
解決方案1
3 已采納 2015-09-14 12:18:35
如果我對您的問題的理解比您基本掌握的要多，那么一個實用程序功能將對共享對象起作用並完成您的有用事情（即，單擊按鈕更改給定元素的顏色），現在您確實需要相同的行為在其范圍之外的另一個控制器中。 您可以通過2種不同的方式實現同一件事：
1）。創建一個服務，並使其在您的控制器中可用，如下所示：
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.factory('myService', function() {
return {
changeColour: function() {
alert("Changing the colour to green!");
}
};
});
myApp.controller('MainCtrl', ['$scope', 'myService', function($scope,
myService) {
$scope.callChangeColour = function() {
myService.changeColour();
}
}]);
</script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="callChangeColour()">Call ChangeColour</button>
</body>
</html>
優點和缺點 ：更多角度方法，但要在每個不同的控制器中添加依賴項並相應地添加方法會產生開銷。
2）。通過rootscope訪問它
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.run(function($rootScope) {
$rootScope.globalChangeColour = function() {
alert("Changing the colour to green!");
};
});
myApp.controller('MainCtrl', ['$scope', function($scope){
}]);
</script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="globalChangeColour()">Call global changing colour</button>
</body>
</html>
優點和缺點 ：這樣，您所有的模板都可以調用您的方法，而不必將其從控制器傳遞給模板。 如果有很多這樣的方法，則污染根范圍。
解決方案2
1 2015-09-14 11:49:26
嘗試刪除分號
ng-click="DispSize()"
因為它將ng-click指令綁定到該函數。
在外部調用AngularJS控制器
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.