カスタムディレクティブでAPIから受け取ったデータを表示する

#angular

APIから受け取ったデータを表示するカスタムディレクティブを作る場合、$watchでscopeのプロパティを監視し再描画を行うといった実装が必要になる。

<div ng-controller="MyController">
  <my-directive data="users"></my-directive>
</div>
  • my-directiveというディレクティブを作る。表示したいデータを参照するscopeのプロパティをdata属性に指定する。
window.ngApp.controller "MyController" ["$scope", "User", ($scope, User) ->
  $scope.users = User.query()
]
  • APIから受け取ったデータをusersというプロパティで参照する。このとき、APIからデータを受け取るのを待たずに空の参照が渡される。非同期に返ってきたデータはこの参照に追加される。
window.ngApp.directive "myDirective", ->
  restrict: "E"
  link: (scope, elements, attrs) ->
    render = (data) ->
      # 描画処理
    scope.$watch(attrs.data, ((newData, oldData) -> render(newData)), true)
  • scope.$watchでscopeのプロパティや、scopeのコンテキストで評価した式の結果を監視する。
    • 第1引数に監視対象を指定する。attrs.dataにはDOMで指定したdata属性の値が入るので、今回は"users"となる。
    • 第2引数に監視対象が変更されたときに実行する処理を渡す。今回は描画処理を渡す。
    • 第3引数にtrueを指定すると、監視対象の値が更新されたときに処理が実行されるようになる。監視対象であるusersはまず空の参照が渡されその後APIから受け取ったデータをそこに追加する（参照は変更されない）ので、ここでtrueを指定する必要がある。ここを省略すると参照が更新されたときのみ処理が行われる。