AngularJSでHTML側(特にng-repeat内)からService/Factoryを使う方法

今回は、AngularJSでHTML側(特にng-repeat内)からService/Factoryを使う方法のシェア。

ユースケースは？

Controllerで持っているデータをng-repeatでまわしながらHTMLに表示したい！
　そして表示する文字列の背景の色を、その文字列に応じて動的に変えたい！
　しかもその動的に変更するロジックが1つのControllerに閉じないので、ServiceやFactoryに切り出したい！
　　・・・というケース。

つまり"あ"であれば赤背景、"い"であれば青背景的なのを、複数のControllerから使えるServiceを作ろうというわけです。

もちろんHTML側で頑張ることもできるんですが、これはAngular的にはアンチパターン。
これをやろうとすると、HTML側でロジックをもつ必要があるので。

どうする？

Controllerで読み込んだServiceやFactoryをそのまま$scopeに渡してしまいます。

つまり、例えばBackgroundColorGenerateServiceという色を変えるServiceがあるとすると、
Controller側で下記のようにInjectします。

myApp.controller('MainController',
 ['$scope', 'BackgroundColorGenerateService',
 function($scope, BackgroundColorGenerateService){
 	$scope.colorGenerator = BackgroundColorGenerateService;
}]);

的な。

あとはこれをHTML側で、ng-styleと一緒に利用します。

<ul ng-repeat="str in strings">
    <li>
    <div ng-style="{'background': colorGenerator.generateColor(str)}">str</div>
    </li>
</ul>

※generateColorはBackgroundColorGenerateServiceに定義されたメソッドだと思ってください。

これで、HTML側でロジックを持つことなく、HTML側でServiceを使うことができます。

以上、AngularJSでHTML側(特にng-repeat内から)Serviceを使う方法でした！