2014年3月5日水曜日

AngularJSのng-includeで読み込んだHTML内で指定したng-modelの変更が反映されない場合の対処

AngularJSのng-includeディレクティブは外部化したHTMLを読み込めるので、HTMLコードの視認性や再利用性が高まるので非常に便利だ。

しかし、一つ問題があることが分かった。ng-includeで読み込んだHTML内で指定したng-modelの変更が反映されない場合があるのだ。

どうやらそれには明確な理由があって、ng-includeで読み込んだHTMLに新しい子スコープが生成されることによるらしい。

なるほど。子スコープの値がいくら変更されても親スコープに反映されないわけだ。

angularjs - Angular - ngModel not updating when called inside ngInclude - Stack Overflow

上のページでは、この問題を回避するにはng-modelに使う値をプリミティブではなくオブジェクトにせよと言っているが、あまり良い方法とは思えない。

他の方法は無いものかと調べると、良い方法があった!



それは、「$parentを使う」こと!

読み込まれるHTML(ここではjsfiddleの制限でscriptタグでHTMLを表現しているが)にあるng-modelを見ると「$parent.lineText」となっている。

これはつまり、読み込まれるHTMLの子スコープの親「HomeCtrl」の$scope.lineTextを指している。

これでng-includeを使ってもほぼ今まで通りコーディングすることができるわけだ^^