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

Question

在我的索引页面上，当我添加如下所示的环聊按钮时，它会按预期绘制和工作。

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

但是当我把它放在一个基于 url 路线显示的模板中时，只有 Hangouts 按钮没有被绘制并且在 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>

请问为什么没有画出来 & 我应该怎么做才能显示按钮？会有很大帮助！

使用AngularJS。

Answer 1

尝试从 id="/home.html"

中删除 /

Answer 2

我通过使用 angular 控制器使用 javascript 而不是 html 标记来渲染来解决这个问题。尝试这样的事情：

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

在您的控制器中：

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

Answer 3

我遇到了同样的问题，并找到了使用 Angular 指令的解决方案。

带有 Google 标签标记的问题呈现按钮是在 platform.js 脚本加载时执行呈现，这是在 Angular 加载模板之前。

所以一个解决方案是在Angular 加载模板后调用Google API 渲染函数。我用 link 函数创建了一个 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'});
    }
  };
});

然后您可以使用自定义元素在模板中显示它：

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

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

Unable to add Hangouts button to HTML template within script tags

html

javascript

angularjs

hangout