次のようなサービスがあります。
angular.module('app').factory('ExampleService', function(){
this.f1 = function(world){
return 'Hello '+world;
}
return this;
})
私はしたいと思います JavaScriptコンソールからそれをテストして機能を呼び出すf1()
サービスのを。
どうやってやるの?
次のようなサービスがあります。
angular.module('app').factory('ExampleService', function(){
this.f1 = function(world){
return 'Hello '+world;
}
return this;
})
私はしたいと思います JavaScriptコンソールからそれをテストして機能を呼び出すf1()
サービスのを。
どうやってやるの?
回答:
angular.element(document.body).injector().get('serviceName')
AngularJSは、依存性注入(DI)を使用して、コンポーネント、ディレクティブ、その他のサービスにサービス/ファクトリーを注入します。サービスを取得するために必要なことは、インジェクターを取得することです、AngularJSを最初(インジェクターはすべての依存関係を関連付け、コンポーネントに提供する責任があります)。
アプリのインジェクターを取得するには、angularが処理している要素からそれを取得する必要があります。たとえば、アプリがbody要素に登録されている場合、次を呼び出しますinjector = angular.element(document.body).injector()
取得したものから、injector
好きなサービスを取得できますinjector.get('ServiceName')
この回答の詳細情報:角度からインジェクターを取得できません
さらに詳細:レガシーコードからAngularJSを呼び出す
$scope
特定の要素のを取得するためのもう1つの便利なトリック。開発者ツールのDOM検査ツールで要素を選択し、次の行を実行します($0
常に選択された要素です):
angular.element($0).scope()
document
また動作します:angular.element(document).injector().get('serviceName')
まず、サービスの修正バージョンです。
var app = angular.module('app',[]);
app.factory('ExampleService',function(){
return {
f1 : function(world){
return 'Hello' + world;
}
};
});
これはオブジェクトを返し、ここでは何も新しいものはありません。
これをコンソールから取得する方法は次のとおりです
var $inj = angular.injector(['app']);
var serv = $inj.get('ExampleService');
serv.f1("World");
以前にそこで行っていたことの1つは、app.factoryが関数自体または関数の新しいバージョンを返すと想定することでした。そうではありません。コンストラクタを取得するには、次のいずれかを行う必要があります
app.factory('ExampleService',function(){
return function(){
this.f1 = function(world){
return 'Hello' + world;
}
};
});
これは、次に「新規」を実行する必要があるExampleServiceコンストラクターを返します。
または、代わりに
app.service('ExampleService',function(){
this.f1 = function(world){
return 'Hello' + world;
};
});
これにより、注入時に新しいExampleService()が返されます。
var $inj = angular.injector(['app']);
、コンソールはスローError: Unknown provider: $filterProvider from app
1つのアプリにしてError: Unknown provider: $controllerProvider from app
...他のアプリに
angular.module('app',[]);
、サービス、コントローラーなどが異なるファイルにあり、それらはすべてangular.module('app').factory('FeatureRegistry',function(){//code here});
たとえば次のように定義されています
@JustGoschaの答えは的確ですが、アクセスしたいときにタイプするのはたくさんあるので、これをapp.jsの下部に追加しました。次に、入力x = getSrv('$http')
する必要があるのは、httpサービスを取得することだけです。
// @if DEBUG
function getSrv(name, element) {
element = element || '*[ng-app]';
return angular.element(element).injector().get(name);
}
// @endif
それをグローバルスコープに追加しますが、デバッグモードでのみです。私はそれをの中に入れて@if DEBUG
、量産コードでそれが終わらないようにしました。 このメソッドを使用して、prouductionビルドからデバッグコードを削除します。
Angularjs依存関係注入フレームワークは、アプリモジュールの依存関係をコントローラーに注入する役割を果たします。これは、そのインジェクターを介して可能です。
最初にng-appを識別し、関連するインジェクターを取得する必要があります。以下のクエリは、DOMでng-appを見つけ、インジェクターを取得するために機能します。
angular.element('*[ng-app]').injector()
ただし、Chromeでは、以下に示すようにターゲットng-appをポイントできます。そして$0
ハックと問題を使用してangular.element($0).injector()
インジェクターを取得したら、以下のように依存関係が挿入されたサービスを取得します
injector = angular.element($0).injector();
injector.get('$mdToast');
angular.element('*[ng-app]').injector()
すべてのケースで動作するはずです。