1

I am attempting to build a site using angularJS and symfony, and in my site I want to add a simple Facebook comments box and twitter timeline shown here, respectively:

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

in my JavaScript i have set up angular routing which routes the user to different views, but the problem is the comments box and twitter timeline don't show up in these views.

They DO however, work perfectly fine when they are placed outside of the ng-view tags.

Here is a VERY simplified code snippet of my problem: 

<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>

Is there something specific i need to do to get twitter/facebook working? it seems as if the javascript is broken, the twitter feed still displays a "tweets by @google" link

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 回答