On my index page, when I add a Hangouts button like below it is drawn & works as expected.
<body ng-app="sampleApp" ng-controller="MainCtrl">
<div class="row">
<div class="col-md-12 m-body">
<div class="m-header-text">
Hello Friend
</div>
<g:hangout render="createhangout"></g:hangout>
<div>
<!-- Insert html view templates here -->
<ui-view></ui-view>
</div>
</div>
</div>
<!-- So on -->
</body>
But when I place it inside a template, which is displayed based on url route, then only the Hangouts button is not drawn & cannot be seen in UI.
<script type="text/ng-template" id="/home.html">
<div class="col-md-12 m-Grid m-rowBg m-border">
<div ng-repeat="peers in lop">
Hey {{peer.username}}
Call Peer <g:hangout render="createhangout"></g:hangout>
</div>
</div>
</script>
Could you please tell me why is it not being drawn & what should I do to get the button displayed? It would be of great help !
Using AngularJS.
I had the same issue, and found a solution using Angular directives.
The problem rendering button with Google tag markup is that the rendering executes when the platform.js script loads, which is before Angular loads the template.
So a solution is to call Google API render function after Angular loaded the template. I did it creating an Angular custom directive with a link function :
hangoutButton.directive('hangoutButton', function() {
return {
restrict: 'E',
template: '<div id="hangout-button"></div>',
link: function (scope, element, attrs) {
gapi.hangout.render('hangout-button', {'render': 'createhangout'});
}
};
});
Then you can display it in a template with the custom element :
<div class="col-md-12 m-Grid m-rowBg m-border">
<div ng-repeat="peers in lop">
Hey {{peer.username}}
Call Peer <hangout-button></hangout-button>
</div>
</div>