14

こんにちは、読んでくれてありがとう。

私は角度のあるアプリを作成していますが、問題に遭遇しました。そのように設定

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 も使用していますが、これを使用してページ上でとにかくジャンプすると、ウィジェットも消えます。どんな情報でもありがとう。

4

6 に答える 6

11

この投稿を参照してください: https://dev.twitter.com/discussions/890

twttr.widgets.load() を呼び出すことで、ウィジェットを再レンダリングできる可能性があると思います。

これが機能しないことがわかった場合は、このコードをコントローラーの $timeout にラップする必要があります。

    controller('MyCtrl1', ['$scope', '$timeout', function ($scope, $timeout) {
            $timeout = twttr.widgets.load();
    }])
于 2014-03-13T21:11:59.087 に答える
4

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​​ に戻ったときにウィジェットが再び有効になります。

于 2014-05-14T17:16:19.530 に答える
2

基本的にはロック・グエンの言う通りです。

したがって、再作成するたびに、最初に削除する必要があります。

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();
于 2014-05-11T11:07:32.827 に答える
2

@b1r3k による回答は問題なく動作します:

これをコントローラーに入れます：

$timeout(function () { twttr.widgets.load(); }, 500);
于 2015-11-11T10:01:55.147 に答える
0

twttr.widgets.load()コントローラー内にロードしようとするとtwttr、コントローラーがインスタンス化して参照するまでに Twitter スクリプトをロードする非同期呼び出しが完了しない可能性があるため、UX の AT SOME POINT で定義されていないというエラーが発生する可能性が高くなります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オブジェクトが存在するかどうかを確認し、存在する場合はスクリプトをリロードします...そうでない場合はスクリプトをリロードします。

これが最適な実装かどうかはわかりませんが、他のすべてのソリューションには、エラーをスローするエッジ ケースがあるようです。私はまだこの代替手段を見つけていません。

于 2015-01-21T18:16:57.727 に答える