Question

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

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

但是当我将其放置在基于网址路径显示的模板中时，则不会仅显示环聊按钮。在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

我通过使用角度控制器使用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 2

我遇到了同样的问题，并找到了使用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>

Answer 3

尝试从/

中删除id="/home.html"

无法将环聊按钮添加到脚本代码中的HTML模板

3 个答案: