2012-11-07 8 views
23

私はディスプレイコントローラと管理コントローラを持っています。私のディスプレイコントローラの中には、選択されている項目のリストを持つドロップダウンセレクタがあります。AngularJSを使用して、<select>要素をサービス経由で更新する属性にバインドする方法

リストを更新するための表示領域のドロップダウンが表示され、管理コントローラで追加された項目が追加されますが、ドロップダウンリストで最新の項目を選択する方法がわかりません。

<div ng-controller="MyDisplayCtrl"> 
    <select ng-model="item" ng-options="i.name for i in items"> 
    </select> 
</div> 

私は自分の状況を説明するためにjsfiddleを作成しました。最終的には、私の質問は、そのng-model = "item"をサービスによって更新されたデータソースにバインドする方法です。

http://jsfiddle.net/whtevn/mUhPW/2/

答えて

15

私はこれまで、かなり満足のいく答えを見つけたようまあ、それが見えます。

Iは

function MyDisplayCtrl($scope, ItemStore) { 
    $scope.items = ItemStore.items; 
    $scope.item = ItemStore.currentItem; 

    // expose the itemstore service to the dom 
    $scope.store = ItemStore 

    $scope.getItem = function(){ 
     return(ItemStore.currentItem); 
    } 
} 

、その後のCurrentItemに対処するコントローラを介してストレージオブジェクト自体を露出直接

<div ng-controller="MyDisplayCtrl"> 
    <select ng-model="store.currentItem" ng-options="i.name for i in items"> 
    </select> 
</div> 

http://jsfiddle.net/whtevn/Cp2RJ/3/

+0

これはうまく動作し、私はデフォルトのパターンとして移動しましたが、私の意見に公開サービスを呼び出すべきではないという理由がある場合は、それを聞きたい – whtevn

+0

理由が1つ私はキャッシュがあると考えることができます。サービスの機能が変更された場合は、コントローラの内部ではなく、積極的にキャッシュされたビューを変更する必要があります。私の経験では、外部のJavaScriptファイルをキャッシュから外すほうが簡単です。これは懸念をより確実に分離します。あなたのコントローラーがスコープに入力し、そのビューがそのスコープにアクセスできるようにします。 –

+0

トレーニングサイトで視聴したビデオを通して、公開されたサービスをビューで使用するのがよい方法です。しかし、サービスへの書き方や構築方法は、変数へのアクセスを許可するのではなく、公に受け入れられる関数やプロパティを返すのではなく、明らかなモジュールパターンを使用することをお勧めします。さらに、サービスは.serviceではなく.factoryメソッドを使用して作成されました。 –

関連する問題