如果我更改angularjs中的视图，为什么我的Twitter小部件不呈现？

一尘不染

如果我更改angularjs中的视图，为什么我的Twitter小部件不呈现？

angularjs

嗨，谢谢您的阅读。

我正在制作一个有角度的应用程序，而我发现一个问题。这样设置

index.html-

<html ng-app="myApp">
...
<div ng-view></div>
<div ng-include="'footer.html'"></div>
...
</html>

我不会打扰我的路线，它的非常简单的/ home显示/home/index.html等等。

/home/index.html（访问该网站时的默认视图）

<div class="responsive-block1">
<div class="tweet-me">
    <h1> tweet me </h1>
</div>

<div class="twitter-box">
    <twitter-timeline></twitter-timeline>
</div>

Twitter时间轴指令

directives.directive("twitterTimeline", function() {
return { 
     restrict: 'E',
     template: '<a class="twitter-timeline" href="https://twitter.com/NAME" data-widget-id="XXXXXXXXXXXXXX">Tweets by @NAME</a>',
     link: function(scope, element, attrs) {

    function run(){
        (!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"));
        console.log('run script');
    };

    run();


     }
   };
});

因此，我刚刚使用来自twitter的标记创建了一个基本的twitter指令。但是，当我将视图示例更改为/ blog时，然后回到/
home，twitter小部件将不再呈现。

我还使用了$ anchorScroll，如果我与此同时跳到页面上，小部件也消失了。任何信息将非常感谢。

阅读 223

2020-07-04

共1个答案

一尘不染

看到这个帖子：https :
//dev.twitter.com/discussions/890

我认为您可以通过调用twttr.widgets.load（）使小部件重新渲染。

如果发现这不起作用，则需要将此代码包装到$ timeout的控制器中：

    controller('MyCtrl1', ['$scope', '$timeout', function ($scope, $timeout) {
            $timeout = twttr.widgets.load();
    }])

2020-07-04