Edited at

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

More than 5 years have passed since last update.

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


index.html

<div ng-controller="MyController">

<my-directive data="users"></my-directive>
</div>



  • my-directiveというディレクティブを作る。表示したいデータを参照するscopeのプロパティをdata属性に指定する。


my_controller.coffee

window.ngApp.controller "MyController" ["$scope", "User", ($scope, User) ->

$scope.users = User.query()
]


  • APIから受け取ったデータをusersというプロパティで参照する。このとき、APIからデータを受け取るのを待たずに空の参照が渡される。非同期に返ってきたデータはこの参照に追加される。


my_directive.coffee

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を指定する必要がある。ここを省略すると参照が更新されたときのみ処理が行われる。