I am trying to render Facebook's embed. I am using ng-repeat. The problem is when added a new embed in array.
Below is the plunkr file I made as an example. Thanks. http://plnkr.co/edit/pzUUL9n4MQ7JMhCO9l3A?p=preview <html ng-app="myApp"> <head> <script src="https://code.angularjs.org/1.2.1/angular.js";></script> <script src="script.js"></script> </head> <body ng-controller="socialController"> <button ng-click="addSocial()">ADD !!!</button> <hr/> <pre> {{ arr_embed | json }} </pre> <hr/> <div ng-repeat="embed in arr_embed"> <div ng-bind-html="embed | htmlEmbed"></div> </div> </body> </html> var app = angular.module('myApp', []); app.controller('socialController', ['$scope', function MyCtrl($scope) { $scope.arr_embed = [ "<div id=\"fb-root\"></div>\n<script>(function(d, s, id) {\n var js, fjs = d.getElementsByTagName(s)[0];\n if (d.getElementById(id)) return;\n js = d.createElement(s); js.id = id;\n js.src = \"//connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.3\";\n fjs.parentNode.insertBefore(js, fjs);\n}(document, \"script\", \"facebook-jssdk\"));</script>\n<div class=\"fb-post\" data-href=\"https://www.facebook.com/646322378739790/posts/945921935446498\"; data-width=\"500\"></div>", "<div id=\"fb-root\"></div>\n<script>(function(d, s, id) {\n var js, fjs = d.getElementsByTagName(s)[0];\n if (d.getElementById(id)) return;\n js = d.createElement(s); js.id = id;\n js.src = \"//connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.3\";\n fjs.parentNode.insertBefore(js, fjs);\n}(document, \"script\", \"facebook-jssdk\"));</script>\n<div class=\"fb-post\" data-href=\"https://www.facebook.com/646322378739790/posts/944714508900574\"; data-width=\"500\"></div>" ]; var new_post = "<div id=\"fb-root\"></div>\n<script>(function(d, s, id) {\n var js, fjs = d.getElementsByTagName(s)[0];\n if (d.getElementById(id)) return;\n js = d.createElement(s); js.id = id;\n js.src = \"//connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.3\";\n fjs.parentNode.insertBefore(js, fjs);\n}(document, \"script\", \"facebook-jssdk\"));</script>\n<div class=\"fb-post\" data-href=\"https://www.facebook.com/646322378739790/posts/942629972442361\"; data-width=\"500\"></div>"; $scope.addSocial = function(){ console.log('----------- ADD ----------'); $scope.arr_embed.push(new_post); }; } ]); app.filter('htmlEmbed', function($sce) { return function(text) { window.fbAsyncInit = function() { FB.init({ appId : '1072208332791856', xfbml : true, version : 'v2.4' }); }; (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); var text = text || ''; return $sce.trustAsHtml(text); }; }); -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
