192

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

4

5 に答える 5

292

基本的に、サービスとして定義するか、ルート スコープに配置するかの 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()そうすれば、コントローラーからテンプレートに渡す必要なく、すべてのテンプレートを呼び出すことができます。

于 2013-02-22T14:29:37.990 に答える
45

最初のアプローチは「Angular like」アプローチとして提唱されていますが、これによりオーバーヘッドが増えると感じています。

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

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

于 2013-12-19T23:33:23.757 に答える
4

AngularJsには、あなたのような問題のためだけに「サービス」と「ファクトリー」があります。これらは、コントローラー、ディレクティブ、その他のサービス、またはその他のangularjsコンポーネント間でグローバルなものを持つために使用されます..関数を定義したり、データを保存したり、関数を計算したり、何でもできますServices内で使用し、それらを AngularJs Components で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 のサービスとファクトリが必要な理由について詳しく知る

于 2016-04-27T21:50:26.650 に答える