Embeding tweets inside angular ng-view

Question

I want to use embeded tweets inside an ng-view partial but for some reason it not working. if I put it outside of the partial (directly in the index.html) it works. Does anyone has an idea how this can be fixed?

Answer 1

The problem is order in which tweeter script and your main.html is loaded: when mail.html is loaded before widget.js, tweeter's script is not able to find your backquote element and render it nice way.

You can put <script ...> into main.html, but in this case keep in mind, that Angular's jqLite does not support <script> tags in partials, loaded via XHR. So you need to include real jQuery before angular.

Here is a Plunker: http://plnkr.co/edit/rQUThnZNAyJQGFIwflGk?p=preview

Answer 2

It seams that we need to call again the twitter js - this isn't related to Angularjs in specific. Because Angular js partial view are not rendered immediately the problem happens. The solution is to call the js file again after the partial was loaded:

$timeout(function() {
    $.ajax({ url: 'http://platform.twitter.com/widgets.js', dataType: 'script', cache:true});
}, 1000);

see: Re-render Tweet button via JS