Facebook comment plugin Angularjs

У меня возникла странная ошибка при добавлении плагина комментариев facebook в моем приложении AngularJS. упрощенной структура страницы приложенияFacebook comment plugin Angularjs

<html ng-app="myapp"> 
<head> 
... 
</head> 
<body> 
<div> 
... 
</div> 
<div ng-view></div> 
... 
</body> 
</html>

Страница с фб коробкой комментария загружается в нг-зрении. Структура страницы, которая содержит Fb комментарий окно выглядит следующим образом

<div id="fb-comment-box> 
<div class="fb-comments" data-href="http://mydomain.com/page/{{ page.id }}" data-numposts="5" data-colorsheme="light"></div> 
</div>

page является angularjs переменной сферы, которая приходит от контроллера. Когда я загружаю эту страницу в браузере и проверяю элемент. Это показывает правильный идентификатор страницы, т.е. данных-HREF является

data-href = "http://mydomain.com/page/2"

Но ниже поля комментария фба, Facebook показывает следующее сообщение об ошибке

Warning: http://mydomain.com/page/%7B%7B%20page.id%7D%7D is unreachable.

я могу видеть, переменная angularJS сферы не является обязательным. Кто-нибудь знает, как решить эту проблему?

источник

2014-05-07 Bibek Subedi

Возможно, это связано с тем, что функциональность FB срабатывает до того, как Angular сможет изменить атрибут data-href.

директива кажется, хорошим выбором здесь:

Вы в основном нужно создать комментарий ящик после угловых может обеспечить правильный URL.
Поскольку это связано с асинхронной манипуляцией с DOM, вам необходимо использовать FB.XFBML.parse(), чтобы FB обработал окно комментариев после изменения атрибута data-href.

директива:

.directive('dynFbCommentBox', function() { 
    function createHTML(href, numposts, colorscheme) { 
     return '<div class="fb-comments" ' + 
         'data-href="' + href + '" ' + 
         'data-numposts="' + numposts + '" ' + 
         'data-colorsheme="' + colorscheme + '">' + 
       '</div>'; 
    } 

    return { 
     restrict: 'A', 
     scope: {}, 
     link: function postLink(scope, elem, attrs) { 
      attrs.$observe('pageHref', function (newValue) { 
       var href  = newValue; 
       var numposts = attrs.numposts || 5; 
       var colorscheme = attrs.colorscheme || 'light'; 

       elem.html(createHTML(href, numposts, colorscheme)); 
       FB.XFBML.parse(elem[0]); 
      }); 
     } 
    }; 
});

HTML-:

<div id="fb-comment-box" dyn-fb-comment-box 
     page-href="https://example.com/page/{{page.id}}" 
     numposts="5" 
     colorscheme="light"> 
</div>

_{Примечание:
сфера дИРЕКТИВЫ будет постоянно следить за изменениями в атрибуте page-href и обновить комментарий ящик , Вы можете изменить это в соответствии с вашими потребностями (например, следить за изменениями других атрибутов или связывать их один раз и останавливать просмотр).}

См, также, это short demo.

источник

2014-05-10 12:57:21 gkalpak

Благодарим вас за объяснение и ответ. Я внедрил ваш код, но получил следующую ошибку: https://docs.angularjs.org/error/$parse/syntax?p0= –

Я заметил ошибку и обновил ответ пару минут назад. Убедитесь, что вы скопировали обновленный ответ. (К сожалению, я не могу проверить его с помощью реального материала FB, поэтому я просто создаю макет объекта - надеюсь, он должен работать так же хорошо с реальным объектом.) – gkalpak

Я добавил ссылку на демонстрационную реализацию (используя mock FB, который просто выводит HTML). – gkalpak

Facebook comment plugin Angularjs

ответ

Смежные вопросы