宣言foo
内のどこからでも呼び出せるようにしたいユーティリティ関数がある場合。ng-app
モジュール設定でグローバルにアクセスできるようにする方法はありますか、それともすべてのコントローラーのスコープに追加する必要がありますか?
5 に答える
基本的に、サービスとして定義するか、ルート スコープに配置するかの 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()
そうすれば、コントローラーからテンプレートに渡す必要なく、すべてのテンプレートを呼び出すことができます。
最初のアプローチは「Angular like」アプローチとして提唱されていますが、これによりオーバーヘッドが増えると感じています。
この myservice.foo 関数を 10 個の異なるコントローラーで使用するかどうかを検討してください。この「myService」依存関係を指定してから、10 個すべてで $scope.callFoo スコープ プロパティを指定する必要があります。これは単なる繰り返しであり、DRY の原則に何らかの形で違反しています。
一方、$rootScope アプローチを使用する場合、このグローバル関数 gobalFoo を 1 回だけ指定するだけで、将来のコントローラーの数に関係なくすべてで使用できるようになります。
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
});
}
....
}
}])
もっと必要なら