Question

嗨，谢谢你的阅读。

我有一个角色应用程序正在制作和我偶然发现了一个问题。设置如此

的index.html -

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

我不打扰我的路线非常简单/家是显示/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，如果我在页面上跳转到这个小部件也会消失。任何信息都会非常感谢。

Answer 1

请参阅此帖子：https://dev.twitter.com/discussions/890

我认为您可以通过调用来重新呈现窗口小部件 twttr.widgets.load（）。

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

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

Answer 2

以Sir l33tname的答案为基础：

在服务声明中：

    angular.module('app.services', []).
      service('tweetWidgets', function() {

        this.loadAllWidgets = function() {

            /* widgets loader code you get when 
             * declaring you widget with Twitter 
             * this code is the same for all widgets 
             * so calling it once will reference whatever
             * widgets are active in the current ng-view */

            !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");
         };

         this.destroyAllWidgets = function() {
            var $ = function (id) { return document.getElementById(id); };
            var twitter = $('twitter-wjs');
            if (twitter != null)
                twitter.remove();
         };  
      });

然后在控制器声明中：

    angular.module('app.controllers', []).
      controller('view_1_Controller', tweetWidgets) {

         // load them all
         tweetWidgets.loadAllWidgets();

     }).

       controller('view_2_Controller', tweetWidgets) {

          // now destroy them :>
          tweetWidgets.destroyAllWidgets();

     });

现在每当你离开视图＃1进入视图＃2时，视图＃2的控制器将删除与视图＃1相关联的小部件，当你返回视图＃1时，小部件将被重新设置。

Answer 3

问题是因为当Angular切换视图时，不会从文档中删除最初插入的脚本标记。每当我的Twitter时间轴指令不在视图中时，我通过删除Twitter脚本元素在我自己的网站上修复此问题。请参阅下面的代码并注释。

 function (scope, el, attrs) {
     el.bind('$destroy', function() {
         var twitterScriptEl = angular.element('#twitter-wjs');
         twitterScriptEl.remove();
     });

     // function provided by Twitter that's been formatted for easier reading
     function (d, s, id) {
         var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';

         // If the Twitter script element is already on the document this will not get called. On a regular webpage that gets reloaded this isn't a problem. Angular views are loaded dynamically.
         if (!d.getElementById(id)) {
             js = d.createElement(s);
             js.id = id;
             js.src = p + "://platform.twitter.com/widgets.js";
             js.parentNode.insertBefore(js, fjs);
         }
     }(document, "script", "twitter-wjs");        
 }

Answer 4

基本上是Loc Nguyen所说的。

因此，每次重新创建它时，必须先将其删除。

var $ = function (id) { return document.getElementById(id); };
function loadTwitter() {!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");}

var twitter = $('twitter-wjs');
twitter.remove();
loadTwitter();

Answer 5

@ b1r3k的回答没有问题：

把它放在你的控制器中：

$timeout(function () { twttr.widgets.load(); }, 500);

Answer 6

对于那些试图在其控制器中加载twttr.widgets.load()的人，你很可能会得到一个错误，{UX}在你的UX中没有定义twttr，因为加载twitter脚本的异步调用可能在控制器实例化并引用twttr时不能完成。

所以我创建了这个TwitterService

.factory('TwitterService', ['$timeout', function ($timeout) {
    return {
        load: function () {
        if (typeof twttr === 'undefined') {
            (function() {
                !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');
            })();
        } else {
            $timeout = twttr.widgets.load();
        };
        }
    }
}])

然后在需要您的小部件的控制器内调用TwitterService.load()。这非常有效。它基本上只检查twttw对象是否存在，如果存在，只需重新加载脚本......否则只需重新加载脚本。

不确定这是否是最佳实现，但似乎所有其他解决方案都存在会引发错误的边缘情况。我还没有找到一个替代方案。

如果我更改angularjs中的视图，为什么我的twitter小部件不会渲染？

6 个答案: