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

【问题标题】：Unable to add Hangouts button to HTML template within script tags无法将环聊按钮添加到脚本标签内的 HTML 模板
【发布时间】：2015-05-31 04:58:26
【问题描述】：

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

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

【问题讨论】：

标签： javascript html angularjs hangout

【解决方案1】：

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

带有 Google 标签标记的渲染按钮的问题在于，渲染是在 platform.js 脚本加载时执行的，也就是在 Angular 加载模板之前。

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

【讨论】：

【解决方案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' });
}]);

【讨论】：

您好，这也适用于 html 标记。我面临的问题是当它在 angularJS 模板中时。在模板内，未呈现环聊按钮。对不起，我觉得这个帖子有点混乱。因此，将占位符-div 放入模板中。并通过更改 url 加载该模板（例如“/newHome”）。在此模板中，未呈现环聊按钮。

【解决方案3】：

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

【讨论】：

嗨尼尔森，但这不是问题所在。实际上，只有 Google 环聊按钮不会在 AngularJS 模板中呈现。因此，当我加载此模板“home.html”时，我希望 Google 环聊按钮也能与所有其他元素一起显示。但不知何故，只有 this 不会被创建。所以我想知道如何解决这个问题。＆如果您可以在编辑器中尝试此操作。这对我有很大帮助:)！如果我找到解决方案，我会尽快在这里发布！ :)