从外部调用 AngularJS 控制器函数

Question

我有以下代码：

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">

意思是：

是否可以从同一控制器的范围之外调用在控制器内部定义的函数？

我需要这个，因为该函数正在以非常非常简单的方式操纵控制器拥有的共享对象（例如，单击按钮会更改给定元素的颜色）。

我无法完成这项工作，我们将不胜感激。

我认为将一些数据结构声明为全局的会帮助我解决这个问题，但是，我想避免这样做，因为除了这是不好的做法之外，它可能会在未来给我带来更多问题。

Answer 1

尝试删除分号

ng-click="DispSize()"

因为它将 ng-click 指令绑定到函数。

Answer 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>

优缺点：这样一来，您的所有模板都可以调用您的方法，而无需将其从控制器传递给模板。如果有很多这样的方法，就会污染 Root 作用域。

从外部调用 AngularJS 控制器函数

Calling an AngularJS controller function from outside of it

javascript

angularjs

ng-controller