ng-repeatで繰り返す内容を復数種用意し、値に応じて出し分けたい

[Hiroshi Uechi]

上地です。

各種SNSから取得してきたデータを元にfeed一覧のようなものを作りたいのですが、
それぞれで表示内容が大きく異なるため、どのような繰り返し処理を行い表示すればよいかわかりません。

このような場合、みなさんはどうされてますでしょうか。

ご教授頂けますと幸いです。
宜しくお願い致します。


サンプルこちら
http://plnkr.co/edit/Wy3IWZdVJJVUMMWCDZeb?p=preview

[Taketoshi Yagishita]

先日、同様のケースがありました。
そのときは、
<li ng-repeat="item in items><span ng-bind-html="feed(item)"></span></li>
みたいに記述して、feed() 内で html を生成するようにしてみました。

この場合、angular-sanitize.js も読み込んでおかんとだめです。

もっとスマートな方法があると思う。
-- yagishita

[Yoichiro Tanaka]

まさにDirectiveの自作を始める機会なんじゃないかと思います。

-Yoichiro

2014年4月25日 16:22 Taketoshi Yagishita <taket...@gmail.com>:

--
このメールは Google グループのグループ「AngularJS Japan User Group」の登録者に送られています。

このグループから退会し、グループからのメールの配信を停止するには angularjs-jp...@googlegroups.com にメールを送信してください。
このグループに投稿するには、angula...@googlegroups.com にメールを送信してください。

このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msgid/angularjs-jp/CAJub07TE4tukBL81YzGGtkPVPxNnqKnW5WALPDh3hGVqBCCC9Q%40mail.gmail.com にアクセスしてください。
その他のオプションについては、https://groups.google.com/d/optout にアクセスしてください。

--
Yoichiro Tanaka
Email: yoic...@eisbahn.jp
Blog: http://www.eisbahn.jp/yoichiro

[Hiroshi Uechi]

Yagishitaさん

ありがとうございます！

ひとまずサニタイズせずに下記のようにしてみました。
return $sce.trustAsHtml( html)


本件のように外から持ってきてHTMLを生成する場合には、サニタイズしておくべきなのでしょうか。

[Hiroshi Uechi]

 Tanakaさん

ありがとうございます！

現状はコントローラー内で HTML を生成し ng-bind-html へ返しているので、

カスタムディレクティブを作成し templateURLとして HTMLファイルを読み込みたいのですが、
そうする場合は、各SNSに合わせたディレクティブを復数用意し、

-- html
<div ng-bind-html="feed(item)"></div>

-- hogeCtrl.js

$scope.feed = function(item) {
　switch(item.type) {

　　case "facebook":

  　　return $sce.trustAsHtml( '<post-facebook></post-facebook>' );

  　　break;

　　case "twitter":

　　　return $sce.trustAsHtml( '<post-facebook></post-facebook>' )

  　　break;

　　case "youtube":

　　　return $sce.trustAsHtml( '<post-youtube></post-youtube>' )

  　　break;

　}

}

のように ng-bind-html へカスタムディレクティブ返す感じでしょうか。

[Hiroshi Uechi]

ng-bind-html へ返すカスタムディレクティブへ 値を渡しても、
カスタムディレクティブ内でちゃんと取得できてないみたいです。なぜだろ。。

-- html
<div ng-bind-html="feed(item)"></div>

-- hogeCtrl.js

$scope.feed = function(item) {
　switch(item.type) {

　　case "facebook":

  　　return $sce.trustAsHtml( '<post-facebook postdata="' + item + '"></post-facebook>' );

  　　break;

　　case "twitter":

  　　return $sce.trustAsHtml( '<post-twitter postdata="' + item + '"></post-twitter>' );

  　　break;

　　case "youtube":

　　　return $sce.trustAsHtml( '<post-youtube postdata="' + item + '"></post-youtube>' );

  　　break;

　}

}

ちなみにスコープは以下のようにしました。

scope: {

      postdata: '='   // "="は属性

    },

[Tessei Yoshida]

吉田です。

post別のdirective使うなら

<div ng-repeat="content in contents" ng-switch="content.type">

  <post-facebook ng-switch-when="facebook" content="content"></post-facebook>

  <post-twitter ng-switch-when="twitter" content="content"></post-twitter>

</div>

switchはhtmlに書いたほうがいいかもしれないですね

横レス失礼しました。

--
このメールは Google グループのグループ「AngularJS Japan User Group」に登録しているユーザーに送られています。

このグループから退会し、グループからのメールの配信を停止するには angularjs-jp...@googlegroups.com にメールを送信してください。
このグループに投稿するには angula...@googlegroups.com にメールを送信してください。

このディスカッションをウェブ上で閲覧するには https://groups.google.com/d/msgid/angularjs-jp/586b88ac-98c3-4500-bbcb-e6f4fbd5d7a2%40googlegroups.com にアクセスしてください。
その他のオプションについては https://groups.google.com/d/optout にアクセスしてください。

--

Opera のメールクライアント: http://jp.opera.com/mail/

[Hiroshi Uechi]

吉田さん

おーなるほど！

横レス大歓迎です！
ありがとうございます、さっそく試してみます。