web-dev-qa-db-ja.com

AngularJS ng-click（またはng-changeなど）でサービス関数を呼び出す方法は？

このような関数を呼び出す場合：

HTML：

_<select ng-model="var" ng-change="myFunction(var)">
  <option ng-repeat="option in alloptions">{{option}}</option>
</select>
_

JS：

_$scope.myFunction = function(){//do things}
_

それはすべて完全に機能しますが、私の関数がサービス内にある場合（コントローラーに到達可能）、関数は呼び出されません。プレフィックスとしてサービス名を指定して呼び出すこともオプションではありません（これはJavaScriptコード自体の中で機能しますが）myService.myFunction(var)

だから私の質問：サービスにあるときにng-changeのサービスを呼び出す適切な方法は何ですか？

前もって感謝します

javascriptangularjsservice
18
Sleenee

スコープを通じて関数を使用してサービス関数を呼び出す必要があります。したがって、あなたの例では、サービスがコントローラーに注入されるという条件で、スコープのmyfunctionメソッド内でserviceメソッドを呼び出すことができます。

$scope.myFunction = function(var){

   myService.myFunction(var);    
}

サービスではなく、$ scopeで定義されたプロパティのみがUIで使用できることを常に覚えておいてください。

29
Nishanth Nair

Whizkidsの答えは技術的には正しいですが、スコープに直接アタッチすることで、サービス全体をビューに公開する問題は発生しません。ただし、これはプロジェクトの複雑さ、およびサービスの設計に依存します。

たとえば、私が書いた再利用可能なビューステートに関連するほとんどのサービスは、基本的なデータを公開する関数のセットにすぎません。

return {
    getData: function() { return container; },
    doSomethingOnData: function() { /* some manipulation of container */ }
};

$scope変数に単純にアタッチすることで、サービスデータにアクセスできます。

$scope.serviceData = MyService.getData();

したがって、サービス関数にアクセスするためのオプションは、Whizkids answerを使用してスコープに添付されたラッピング関数を作成するか、サービスをビューに直接公開することです。

$scope.$MyService = MyService;

次のようなことができます：

<div ng-click="$MyService.doSomethingOnData()"></div>

この方法は厳密に角度分離の原則に反しますが、単純なラッパーで公開する必要があるサービス内に多くの関数がある場合、コードが簡潔になります。

15
Matt Way