Share-button, comment-box Doesn't show when inside of ng-view

[renanfranca]

I found the same problem here on stackoverflow (wasn't with your framework): http://stackoverflow.com/questions/18392946/facebook-comments-box-twitter-feed-broken-in-angular-symfony-web-app

Is there any workaround? I notice that profile picture works because you make an api call inside the directive.. and every time i change route it's bring the picture as expected..

[renanfranca]

I made a workaround changing the HTML by listening to attrs.$observe and calling FB.XFBML.parse(element[0]).

Here is the source: http://stackoverflow.com/questions/23516305/facebook-comment-plugin-angularjs

And here is the code i changed:
function FacebookShareDirective(facebookService) {
return {
restrict: 'E',
replace: true,
template: '<fb:share-button ng-attr-href ng-attr-type>/fb:share-button',
scope: {
href: '@href',
type: '@type'
},
link: function (scope, element, attrs) {
facebookService.ready.then(function () {
FB.XFBML.parse(element[0]);
});
function createHTML(href, type) {
return '<fb:share-button href="' + href + '" ' +
'type="' + type + '" ' + '>/fb:share-button';
//return '<div class="fb-comments" ' +
// 'data-href="' + href + '" ' +
// 'data-numposts="' + numposts + '" ' +
// 'data-colorsheme="' + colorscheme + '">' +
// '';
}
attrs.$observe('pageHref', function (newValue) {
var href = newValue;
var type = scope.type;

            console.log('FacebookShare: observe: pageHref = ' + newValue);

            console.log('FacebookShare: observe:function createHTML = ' + createHTML(href, type));

            console.log('FacebookShare: $scope.href = ' + scope.href + ' - $scope.type = ' + scope.type);

            element.html(createHTML(href, type));

            facebookService.ready.then(function () {
                FB.XFBML.parse(element[0]);
            });
        });
    }
};

}

FacebookShareDirective.$inject = ['facebookService'];

angular.module('angularjs-facebook-sdk.directives')
.directive('afbShareButton', FacebookShareDirective);

[jonas-pietzsch]

Is this problem already fixed? I included this very nice angular plugin into a project today. I tried if everything works with inserting the FacebookNameDirective. Quickly I had to notice that it only works when it was placed outside of ng-view, just like this issue states...
Was it already fixed in the latest version?
I tried to understand your workaround, renanfranca, but I'm not getting smart of the code inserted above. Could you gist it, please? That would be very kind

[cpeker]

+1

[pajingko]

I have the same problem.

[wlepinski]

I'll take a look.

[wlepinski]

@pajingko @cpeker @jverhoelen @renanfranca I just updated the plugin to version 1.1.0 (https://github.com/wlepinski/angularjs-facebook-sdk/releases/tag/v1.1.0). Please take a look at the example folder because it's working for me now. I think that the upgrade of both Angular and Facebook SDK did the trick. If this version doesn't work for you, I'll need a JSBin or something similar with a code sample of the problem.