1

angularJS と symfony を使用してサイトを構築しようとしています。私のサイトでは、ここに示す単純な Facebook コメント ボックスと twitter タイムラインをそれぞれ追加したいと考えています。

https://developers.facebook.com/docs/reference/plugins/comments/ https://twitter.com/settings/widgets/370693822461657088/edit?focus_textarea=1¬ice=WIDGET_CREATED

私の JavaScript では、ユーザーをさまざまなビューにルーティングする角度ルーティングを設定しましたが、問題はコメント ボックスと Twitter タイムラインがこれらのビューに表示されないことです。

ただし、ng-view タグの外側に配置すると、完全に正常に機能します。

これは私の問題の非常に単純化されたコードスニペットです:

<html ng-app="myApp">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>

        {% block custom_stylesheets %}
        {% endblock %}
    </head>

    <body>
        {% block body %}
    <div id = "container">
        <!-- twitter and facebook work outside of here -->
        <div ng-view>
            <!-- but not in here -->
        </div>
    </div>
        {% endblock %}

    {% block custom_javascripts %}
        {% endblock %}
    </body>
</html>

Twitter/Facebook を機能させるために必要な特定のことはありますか? JavaScript が壊れているように見えますが、Twitter フィードにはまだ「@google によるツイート」リンクが表示されます。

4

1 に答える 1

0

DOM 要素のセットが存在する場合は常に JavaScript を実行する必要があるため、ディレクティブが必要です。

(function() {
  var createDirective, module, pluginName, _i, _len, _ref;

  module = angular.module('FacebookPluginDirectives', []);

  createDirective = function(name) {
    return module.directive(name, function() {
      return {
        restrict: 'C',
        link: function(scope, element, attributes) {
          return typeof FB !== "undefined" && FB !== null ? FB.XFBML.parse(element.parent()[0]) : void 0;
        }
      };
    });
  };

  _ref = ['fbActivity', 'fbComments', 'fbFacepile', 'fbLike', 'fbLikeBox', 'fbLiveStream', 'fbLoginButton', 'fbName', 'fbProfilePic', 'fbRecommendations'];
  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
    pluginName = _ref[_i];
    createDirective(pluginName);
  }

}).call(this);

Facebookのものを非常に簡単な方法で処理するこれをインターネットで見つけました。定義は元の使用法と同じままであると信じています。次のようにするだけです。

<div class="fb-comments" data-href="http://pyramidplayersproductions.org" data-width="292" data-num-posts="10"></div><br/>
<div class="fb-like-box" data-href="http://www.facebook.com/pyramidplayersproductions" data-width="292" data-show-faces="true" data-stream="true" data-show-border="true" data-header="true"></div>

Twitter フィード用に自分で作成する必要があります (または、Google で Angular twitter ディレクティブを検索して、何が表示されるかを確認してください)。何もしない場合、ディレクティブを構築するための一般的な式は次のようになります。

angular.module("customDirectives", []).directive("myTwitterDirective", function() {
          return {
            //C means class E means element A means attribute, this is where this directive should be found
            restrict: 'E',
            link: function(scope, element, attributes) {
              //do javascript you need to here to get data or initialize
              //twitter.  you can access the dom element using element[0]
              //element is the angular wrapped element object attributes
              //has any HTML attributes like attribute.myAttribute would be 'something if <my-twitter-directive myAttribute='something'>
            }
          };
        });


//probably in another file
angular.module("mainApp", ["customDirectives"]);

使用法は次のようになります。

<my-twitter-directive></my-twitter-directive>

このようなものをディレクティブにラップすることで、DOM 操作コードをサービスまたはコントローラー (およびプレゼンテーション) コードから除外し、実際のブラウザーやビューへの依存関係を必要とせずに、それらすべてを簡単にテストできるようにします。

上記の私自身のアドバイスに従うことにしましたが、私は正しいと思います。

http://jsfiddle.net/MPnES/

JS

angular.module("mainApp", []).directive("twitterTimeline", function() {
          return {
            //C means class E means element A means attribute, this is where this directive should be found
            restrict: 'C',
            link: function(scope, element, attributes) {

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

HTML

<body ng-app="mainApp">
<a class="twitter-timeline" href="https://twitter.com/pattonoswalt" data-widget-id="370757361348014081">
Tweets by @pattonoswalt
</a>
</body>
于 2013-08-23T03:50:54.013 に答える