AngularJSのテンプレートからサービスを呼び出すにはどうすればよいですか？

Question

は

私は簡潔で、それはこのようになります言うことができますのために、それが行うJSONオブジェクトを返すサービスがあります。

.service ('levelService', function() { 

    // service to manage levels. 
    return { 
     levels : [{name:'Base', href:'base'},{name:'Level 1', href:'level1'},{name:'level2', href:'level2'}] 
    }; 

}) 

を、私はそれは大丈夫だと思うが、私は、テンプレートで、今それを使用したいと思います。現在、私は次のようなものを持っています：

<ul class="dropdown-menu" ng-init="levels = [{name:'Base', href:'base'},{name:'Level 1', href:'level1'},{name:'level2', href:'level2'}];"> 
         <li ng-repeat="level in levels"> 
     <a ng-href="#/modeling/level/{{level.href}}">{{level.name}}</a></li> 
        </ul> 

サービスを使用するにはどうすればいいですか？私は適切なことをするように感じる、コントローラにサービスを追加することですが、これはコントローラの外にあります。このスペース用の新しいコントローラを作成する必要がありますか、または直接サービスを参照できますか？

Answer 1

はい、コントローラーを作成することをお勧めします。

MVCアプリケーションアーキテクチャの背景にあるアイデアは、オブジェクト/クラスを密接に結合していないということです。コントローラにサービスを注入した後、levelsを$scopeに追加すると、HTMLがデータを取得する場所を心配する必要がなくなります。

また、非常に素早いプロトタイプをノックアップするには、おそらくng-initを使用しても問題ありませんが、そのコードをプロダクションコードに使用しないでください（モデルのデータ自体がビューのHTMLに密接に結合されているため）。

ヒント：dropdown-menu（つまりページ/セクション）の親コンテナにコントローラを使用して、dropdown-menuのディレクティブを使用することをお勧めします。ディレクティブをビューコンポーネントと見なします。

通常、egghead.ioのビデオチュートリアルが役立つ場合があります。

Answer 2

は... はその後、あなたのテンプレートでサービスを呼び出すことができます。..コントローラに

app.controller('yourCtrl', function($scope, levelService) { 
    $scope.levelService= levelService; 
});