0

次のコードがあります。

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

これで意味：

同じコントローラーのスコープ外から、コントローラー内で定義されている関数を呼び出すことは可能ですか?

これが必要なのは、関数が非常に単純な方法でコントローラーが所有する共有オブジェクトを操作しているためです (たとえば、ボタンをクリックすると、特定の要素の色が変わります)。

私はこれを機能させるのに問題があります。

一部のデータ構造をグローバルとして宣言すると、この問題を解決するのに役立つと思いますが、悪い習慣であることに加えて、将来さらに問題が発生する可能性があるため、それを避けたいと思います。

4

2 に答える 2

3

私があなたの問題を正しく理解している場合、あなたが基本的に持っているものよりも、共有オブジェクトで機能し、便利なことを行う1つのユーティリティ関数があります（つまり、ボタンをクリックすると、特定の要素の色が変わります）、同じ動作が必要になりますその範囲外の別のコントローラーで。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).ルートスコープ経由でアクセスする

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

長所と短所: このようにして、すべてのテンプレートは、コントローラーからテンプレートにメソッドを渡すことなく、メソッドを呼び出すことができます。そのようなメソッドがたくさんある場合、ルートスコープを汚染します。

于 2015-09-14T12:18:35.310 に答える
1

セミコロンを削除してみてください

ng-click="DispSize()"

ng-click ディレクティブを関数にバインドするためです。

于 2015-09-14T11:49:26.027 に答える