Render Facebook's embed added dynamically
Samuel Raymundo Cusi Lima
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);
};
});