175
ユーティリティの機能がfooの場合、ng-app宣言内のどこからでも呼び出せます。どこかでモジュール設定でグローバルにアクセスできるようにすることができますか、それともすべてのコントローラのスコープに追加する必要がありますか？角度の付いたすべてのコントローラーで機能を使用できますか？
A
答えて
272
基本的に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()を呼び出すことができます。
+4
最初の解決策では、たくさんの 'foo（）'関数があればどうしますか？ '$ scope.callFoo（）'ラッパーを各自作成することは大変な作業です。テンプレートの中で使用できるように、ライブラリのすべての機能をスコープに「* attach」することはできますか？私は私のテンプレート上で利用できるようにしたい大きな単位変換ライブラリを持っています。 – AlexStack
+3
私の質問も同様です。私はこれを試して、それは動作します：それを使用する各場所で新しいラッパーを作成する代わりに、 '$ scope.callFoo = myService.foo;'と言って "attach"することができます。 –
+1
あなたの助けてくれてありがとう、私はどのように私のアプリ全体と$ rootScope仕事をした変更機能を利用できるようにするのだろうかと思っていた。私は翻訳モジュールをアプリケーションから離れたままにしておきたいので、他のアプリケーションにもプラグインすることができます。 –
43
最初のアプローチは「角度のような」アプローチとして提唱されていますが、これはオーバーヘッドを増やすと感じています。
このmyservice.foo関数を10種類のコントローラで使用したい場合は、私は、この 'myService'の依存関係を指定してから、$ 10のすべての$ scope.callFooスコーププロパティを指定する必要があります。これは単なる繰り返しであり、何らかの形でDRY原則に違反しています。
$ rootScopeアプローチを使用すると、このグローバル関数gobalFooを1回だけ指定することができます。これは、後ですべてのコントローラで使用できるようになります。
48
あなたはまた、私は推測し、それらを組み合わせることができます。
<!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>
+7
私はこれが@Praymの答えによって正当化される正解であるべきだと思います。 10種類のコントローラでサービスの依存関係を指定するのは意味がありません。 – jvannistelrooy
+0
サービスに '$ rootScope'のCRUDプロパティ/変数を持つメソッド/関数を含めることはできますか？ – jezmck
2
AngularJsは「サービス」とだけyours.Theseのような問題のためのコントローラ間のグローバルな何かを持っているために使用されている「は工場」、ディレクティブを持っています、その他のサービスやその他の角度コンポーネントを使用することができます。 ..関数を定義したり、データを格納したり、関数を計算したり、内部で必要なものを作成したりすることができます。サービス .like
angular.module('MyModule', [...])
.service('MyService', ['$http', function($http){
return {
users: [...],
getUserFriends: function(userId){
return $http({
method: 'GET',
url: '/api/user/friends/' + userId
});
}
....
}
}])
あなたが必要な場合は、より
Find More About Why We Need AngularJs Services and Factories
-1
私は少し角度に新しいが、私は何をするのに便利（と非常に簡単）が発見され、私はグローバル・スクリプトを作ったんだものとにかくすべてのページでアクセスする必要のあるグローバル変数を持つローカルスクリプトの前に自分のページにロードします。そのスクリプトでは、 "globalFunctions"というオブジェクトを作成し、プロパティとしてグローバルにアクセスする必要がある関数を追加しました。例えばglobalFunctions.foo = myFunc();。次に、各ローカルスクリプトで、$scope.globalFunctions = globalFunctions;と書いて、グローバルスクリプトのglobalFunctionsオブジェクトに追加した関数に即座にアクセスできます。
これは回避策の1つですが、それはあなたには役立ちませんが、多くの機能を備えているので、間違いなく助けになりました。
+0
私はちょうどなぜdownvotes興味があるのですか？私は新しく、プロから知りたいです。 – Izzy
これについて100％確信しているわけではありませんが、あなたのモジュールで次のように定義することもできます： 'module.value（ 'myFunc'、function（a）{return a;}）;'あなたのコントローラに名前でそれを注入してください。（もしサービスを避けたいのであれば） – user2173353
私はすべてのコントローラに手動で追加しなければならないという意味です。 $ rootScopeは、私が2年前にやりたかったことに行く道です。） –
OK。 :)私はちょうど孤立した範囲とより頻繁にプレーンコントローラよりも多くの指示を使用し、私はとにかくすべてを注入する必要があります。これが提供するモジュラーコードスタイルが好きです。また、あなたは親スコープを何らかの方法で混乱させる必要はなく、スコープ変数がどこから来るのかについてはほとんど検索する必要はありません。 :) – user2173353