web-dev-qa-db-ja.com

すべてのコントローラで角度付きで機能を利用できるようにすることはできますか？

ng-app宣言内のどこからでも呼び出せるようにしたいユーティリティ関数fooがある場合。モジュールの設定でグローバルにアクセスできるようにすることはできますか、それともすべてのコントローラのスコープに追加する必要がありますか？

angularjsfunctionglobal
190
Ludwig Magnusson

基本的に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.factory('myService', function() {
        return {
            foo: function() {
                alert("I'm foo!");
            }
        };
    });

    myApp.controller('MainCtrl', ['$scope', 'myService', function($scope, myService) {
        $scope.callFoo = function() {
            myService.foo();
        }
    }]);
    </script>
</head>
<body ng-controller="MainCtrl">
    <button ng-click="callFoo()">Call foo</button>
</body>
</html>

それがあなたにとっての選択肢ではない場合は、次のようにルートスコープに追加することができます。

<!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.globalFoo = function() {
            alert("I'm global foo!");
        };
    });

    myApp.controller('MainCtrl', ['$scope', function($scope){

    }]);
    </script>
</head>
<body ng-controller="MainCtrl">
    <button ng-click="globalFoo()">Call global foo</button>
</body>
</html>

このようにして、あなたのすべてのテンプレートはコントローラからテンプレートに渡す必要なしにglobalFoo()を呼び出すことができます。

290
Anders Ekdahl

それらを組み合わせることもできます。

<!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 {
                foo: function() {
                    alert("I'm foo!");
                }
            };
        });

        myApp.run(function($rootScope, myService) {
            $rootScope.appData = myService;
        });

        myApp.controller('MainCtrl', ['$scope', function($scope){

        }]);

    </script>
</head>
<body ng-controller="MainCtrl">
    <button ng-click="appData.foo()">Call foo</button>
</body>
</html>
53
ric

最初のアプローチは「角度のような」アプローチとして提唱されていますが、これはオーバーヘッドを追加すると感じます。

このmyservice.foo関数を10種類のコントローラで使用するかどうかを検討してください。この 'my​​Service'依存関係を指定してから、$ scope.callFooスコーププロパティを10個すべてに指定する必要があります。これは単なる繰り返しであり、どういうわけかDRYの原則に違反しています。

一方、$ rootScopeアプローチを使用する場合は、このグローバル関数gobalFooを1回だけ指定します。将来のすべてのコントローラで使用できるようになります。

44
Praym

AngularJsには、「Services」と「Factories」があります。これらは、グローバルな問題コントローラー、ディレクティブ、その他のサービスまたは他のanglejsコンポーネント間..関数の定義、データの保存、計算関数の作成、または内部で必要なものの作成サービス、AngularJsコンポーネントでGlobal。likeとして使用します

angular.module('MyModule', [...])
  .service('MyService', ['$http', function($http){
    return {
       users: [...],
       getUserFriends: function(userId){
          return $http({
            method: 'GET',
            url: '/api/user/friends/' + userId
          });
       }
       ....
    }
  }])

もっと必要な場合

AngularJsサービスと工場が必要な理由の詳細を確認

4
Hazarapet Tunanyan

私はAngularのほうが少し新しいですが、（そして非常に簡単に）私がアクセスする必要があるグローバル変数を持つローカルスクリプトの前に自分のページにロードするグローバルスクリプトを作成しました。とにかくすべてのページで。そのスクリプトでは、 "globalFunctions"というオブジェクトを作成し、グローバルにアクセスするために必要な関数をプロパティとして追加しました。例えばglobalFunctions.foo = myFunc();。それから、各ローカルスクリプトで$scope.globalFunctions = globalFunctions;を書き、グローバルスクリプトのglobalFunctionsオブジェクトに追加した関数に即座にアクセスできます。

これはちょっとした回避策であり、それがあなたを助けてくれるかどうかはわかりませんが、多くの機能を持っていたので間違いなく私を助けてくれました。

0
Izzy