无法在脚本标记内的HTML模板中添加环聊按钮

Question

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. 但是，当我将其放在基于url路由显示的模板中时，则只有环聊按钮未绘制且无法在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. 使用AngularJS。

Answer 1

I solved this by using the angular controller to render with javascript instead of in html markup. 我通过使用角度控制器使用javascript而不是html标记进行渲染来解决此问题。 Try something like this: 尝试这样的事情：

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

      <div id="placeholder-div"></div>

      <div>
        <!-- Insert html view templates here -->
          <ui-view></ui-view>
      </div>
    </div>
  </div>
<!-- So on -->

In your controller: 在您的控制器中：

myApp.controller('MainCtrl', ['$scope', function($scope) {
    gapi.hangout.render('placeholder-div', { 'render': 'createhangout' });
}]);

Answer 2

I had the same issue, and found a solution using Angular directives. 我遇到了同样的问题，并找到了使用Angular指令的解决方案。

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. 带有Google标记标记的问题渲染按钮是，渲染是在platform.js脚本加载时（即Angular加载模板之前）执行。

So a solution is to call Google API render function after Angular loaded the template. 因此，一种解决方案是在Angular加载模板后调用Google API渲染函数。 I did it creating an Angular custom directive with a link function : 我用链接功能创建了一个Angular自定义指令：

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>

Answer 3

尝试从id="/home.html"删除/ 。

无法在脚本标记内的HTML模板中添加环聊按钮

问题描述

3 个解决方案

解决方案1
0 2015-06-09 12:30:13

解决方案2
0 已采纳 2015-10-24 19:22:59

解决方案3
-3 2015-06-02 14:09:17

无法在脚本标记内的HTML模板中添加环聊按钮

问题描述

3 个解决方案

解决方案1 0 2015-06-09 12:30:13

解决方案2 0 已采纳 2015-10-24 19:22:59

解决方案3 -3 2015-06-02 14:09:17

解决方案1
0 2015-06-09 12:30:13

解决方案2
0 已采纳 2015-10-24 19:22:59

解决方案3
-3 2015-06-02 14:09:17