Facebook的评论栏中/ Twitter的饲料中的角/ symfony的Web应用程序打破

本文介绍了Facebook的评论栏中/ Twitter的饲料中的角/ symfony的Web应用程序打破的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图建立使用angularJS和symfony的一个网站，并在我的地盘
我想在这里补充所示的简单Facebook的评论框和Twitter时间线，分别为：

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

<一href=\"https://twitter.com/settings/widgets/370693822461657088/edit?focus_textarea=1&notice=WIDGET_CREATED\" rel=\"nofollow\">https://twitter.com/settings/widgets/370693822461657088/edit?focus_textarea=1&notice=WIDGET_CREATED

在我的JavaScript我已经设置了角路由哪些路由用户不同的意见，但问题是在评论框和Twitter时间表并不在这些视图中显示出来。

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.

他们这样做然而，工作完全正常，当它们被放置在NG-视图标签之外。

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

下面是我的问题非常简单code片断：

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>

有没有一些具体的事情，我需要做的就是微博/ Facebook的工作？
它好像的JavaScript坏了，Twitter的饲料仍然是由@google鸣叫链接显示

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

推荐答案

您需要的指令，因为JavaScript需要执行一些时组DOM元素是present：

You need directives because the JavaScript needs to execute whenever some set of DOM elements is present:

(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的一个人在pretty简单的方法，我相信即使定义停留在原来一样使用的互联网络，你就这样做：

I found this one on the internets that handles the Facebook one's in a pretty simple way I believe the definition even stays the same as the original usage, you just do something like:

<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的饲料（或谷歌搜索角叽叽喳喳指令，看看表面）。如果没有确实的通式为建设一个指令是：

You'll still have to roll your own for the twitter feed (or search google for Angular twitter directive and see what surfaces). If nothing does the general formula for building a directive will be:

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操作code OUT的服务或控制器（和presentation）code，保持所有的人都容易测试，而不需要一个实际的浏览器或在视图依赖性。

Wrapping this stuff up in a directive keeps the DOM manipulation code out of the services or controllers (and presentation) code, keeping all of them easily testable without the need for an actual browser or dependencies on the view.

我决定按照上面我自己的意见，我想我是正确的：

I decided to follow my own advice above and I think I'm right:

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

这篇关于Facebook的评论栏中/ Twitter的饲料中的角/ symfony的Web应用程序打破的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！