Javascript 从外部调用AngularJS控制器函数_Javascript_Angularjs_Ng Controller

Javascript 从外部调用AngularJS控制器函数

javascript angularjs

Javascript 从外部调用AngularJS控制器函数,javascript,angularjs,ng-controller,Javascript,Angularjs,Ng Controller,我有以下代码： app.controller('MatrixExpertCtrl', function($scope,$http){ $scope.PassedMatrix=[]; $scope.GetMatrixFromServer=function(){ $http.get("http://localhost:3000/getmatrixfromdb").success(function(resp){ alert("The matrix

我有以下代码：

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


抽样调查
范例巴拉圭
更多随机文本
结束段落
更新
//更多的代码

这意味着：

是否可以从同一控制器的作用域之外调用控制器内部定义的函数

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

我有困难使这项工作，任何帮助将不胜感激

我认为将某些数据结构声明为全局将有助于我解决此问题，但我希望避免这样做，因为这不仅是一种不好的做法，而且将来可能会给我带来更多问题。

尝试删除分号

ng-click="DispSize()"

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

尝试删除分号

ng-click="DispSize()"

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

如果我正确理解了您的问题，那么您基本上拥有的是一个实用功能，它将在您的共享对象上工作，并执行有用的操作（即单击按钮更改给定元素的颜色），现在您确实需要在其范围之外的另一个控制器中执行相同的行为。您可以通过两种不同的方式实现相同的目标：

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>


var myApp=angular.module（'myApp'，[]）；
myApp.factory（'myService'，function（））{
返回{
changeColour:function（）{
警告（“将颜色更改为绿色！”）；
}
};
});
myApp.controller（'MainCtrl'，['$scope'，'myService'，function（$scope，
我的服务）{
$scope.callChangeColor=函数（）{
myService.changeColour（）；
}
}]);
呼叫变色

优点和缺点：更具角度性的方式，但在每个不同的控制器中添加依赖项并相应地添加方法会增加开销

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>


var myApp=angular.module（'myApp'，[]）；
myApp.run（函数（$rootScope）{
$rootScope.globalChangeColor=函数（）{
警告（“将颜色更改为绿色！”）；
};
});
myApp.controller（'MainCtrl'，['$scope'，函数（$scope）{
}]);
呼叫全球变色

优点和缺点：通过这种方式，所有模板都可以调用方法，而无需将方法从控制器传递到模板。如果有很多这样的方法，则会污染根范围。

如果我正确理解了您的问题，那么您基本上拥有的是一个实用功能，它可以处理您的共享对象并执行有用的操作（即单击按钮更改给定元素的颜色）现在，您确实需要在其范围之外的另一个控制器中执行相同的行为。您可以通过两种不同的方式实现相同的目标：

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>


var myApp=angular.module（'myApp'，[]）；
myApp.factory（'myService'，function（））{
返回{
changeColour:function（）{
警告（“将颜色更改为绿色！”）；
}
};
});
myApp.controller（'MainCtrl'，['$scope'，'myService'，function（$scope，
我的服务）{
$scope.callChangeColor=函数（）{
myService.changeColour（）；
}
}]);
呼叫变色

优点和缺点：更具角度性的方式，但在每个不同的控制器中添加依赖项并相应地添加方法会增加开销

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>


var myApp=angular.module（'myApp'，[]）；
myApp.run（函数（$rootScope）{
$rootScope.globalChangeColor=函数（）{
警告（“将颜色更改为绿色！”）；
};
});
myApp.controller（'MainCtrl'，['$scope'，函数（$scope）{
}]);
呼叫全球变色

优点和缺点：通过这种方式，所有模板都可以调用方法，而无需将方法从控制器传递到模板。如果有很多这样的方法，就会污染根作用域。

它不是“在控制器中”，而是在作用域上。如果

ng click

指令位于另一个作用域中，则它无权访问该功能。或者以不同的方式使用作用域，或者使用其他一些状态共享机制，比如服务，或者触发一个事件。您能为您的问题提供JSFIDLE或plunkr吗？我将尝试在这里设置一个简单的plunkr。我想要的是，当我点击按钮时，它会将矩形的颜色更改为绿色。为什么不把按钮放在ng应用程序中呢？就像这里：它不是“在控制器中”，而是在范围内。如果

ng click

指令位于另一个作用域中，则它无权访问该功能。或者以不同的方式使用作用域，或者使用其他一些状态共享机制，比如服务，或者触发一个事件。您能为您的问题提供JSFIDLE或plunkr吗？我将尝试在这里设置一个简单的plunkr。我想要的是，当我点击按钮时，它会将矩形的颜色更改为绿色。为什么不把按钮放在ng应用程序中呢？如下所示：这与分号相同，因为表达式无论如何都会被解析。这与分号相同，因为表达式无论如何都会被解析。@BrunoOliveira享受编码：）@BrunoOliveira享受编码：）