キーワード

• AngularJS
• service

したいこと

サービスに状態を持たせて、この状態に応じてビューの表示を切り替える。また、ビューのクリックイベントによってサービスの状態を更新する。もちろんこれをビューに反映させる。

どうやって

&color(red){思い違いがありました（ノートにて）。};

サービスに状態を取得する関数と変更する関数を定義する。

fooService#isBar()

状態を取得する。

fooService#toggleBar()

状態を変更する。

コントローラにこの関数をオブジェクトで保持する。

this.state = {
  isBar: fooService.isBar
};

ng-clickでコントローラからサービスの状態を変更する。

this.toggleBar = function() {
  fooService.toggleBar();
};

ノート

ng-ifなどで$ctrl.state.isBar()を監視しておけば、ng-clickで状態を変更したタイミングでビューに反映でき(て)る。

&color(red){思い違い};

サービスの関数の中でthis.別の関数()を使っていると、コントローラ側のオブジェクトでその関数を探しにいってしまってエラーになる。関数の代入がよくわかっていなかったようだ。。単純に、

this.state = fooService;

としてしまうのがいいと思う。

参考

• Angularのservice, factory, providerの使い分け #scripty01 - pirosikick's diary