読者です 読者をやめる 読者になる 読者になる

kitak.blog

Kみたいなエンジニアになりたいブログ

AngularJSのカスタムディレクティブのscopeで指定したアクションに引数を渡す術

angularjs

こんにちは。今日はキタソン、きたけーです。

今日は一日中、AngularJSのカスタムディレクティブをつくってたんですが、スコープのアクションに引数を渡す方法がわからなくてちょっと困ったのでメモ。(コードはcoffeescript)

ディレクティブの定義がこれで

app.directive 'foo', ->
  scope: {
    barAction: '&'
  }
  restrict: 'EA'
  controller: 'fooCtrl'
  templateUrl: 'partials/foo.tpl.html'
  replace: true

テンプレートがこんなかんじ

<foo bar-action="someAction(x, y)"></foo>

単純に

barAction(123, 456)

とかしても引数が渡らないので、scopeの指定を=(双方向バインディング)にするしかないかなぁ、と思ったんですが、オブジェクトを渡すとキーと変数名を紐付けてくれるっぽい。(refs: angularjs directive call function specified in attribute and pass an argument to it - Stack Overflow )

barAction({x: 123, y: 456})

(ちょっときもいな...) これ以外にも大量の知見が得られたので有意義な一日だった。