javascript - ng-click 在 Bootstrap 弹出窗口内容中不起作用

Question

我想在弹出窗口中显示一个可单击的表格，并在单击其中一行时调用一个函数。我的 html 看起来像这样:

<a popover  id="showDays"
    type="button"
    class="btn btn-success btn-xs pull-left"
    data-toggle="popover"
    data-placement="right"
    data-html="true"
    title="Popover title"
    data-content=
    '<table class="table table-condensed">
       <tbody>
         <tr ng-repeat="d in days" ng-click="show(111)">
           <td ng-bind="d"></td>
           <td ng-bind="x"></td>
         </tr>
       </tbody>
     </table>'>
      <i class="fa fa-clock-o fa-lg">Click me</i>
 </a>

还有我的 script.js:var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.days = [
  'Sunday',
  'Monday',
  ];
  $scope.show = function(x) {
    console.log("show called with " + x);
    $scope.x = x;
  }
}).directive('popover', function($compile, $timeout){
  return {
    restrict: 'A',
    link:function(scope, el, attrs){
      var content = attrs.content;
      var elm = angular.element('<div />');
      elm.append(attrs.content);
      $compile(elm)(scope);
      $timeout(function() {
        el.removeAttr('popover').attr('data-content',elm.html());
        el.popover();
       });
    }
  }
});

Demo here

代码是从这个question复制的，答案本身工作正常，但我的 show 函数没有被调用。知道为什么吗？

Answer 1

我发现了问题，由于某种原因，指令无法将函数 show 与 scope 绑定(bind)，但在 days 上成功，我尝试过一些事情，如果我改变 link 函数的编写方式，ng-click 可以工作，但 ng-repeat 不行，这意味着它无法绑定(bind) days 在这种情况下。

更新后的DEMO使用 templateUrl 而不是 data-content 属性

<script type="text/ng-template" id="popover-content">
     <table class="table table-condensed">
       <tbody>
         <tr ng-repeat="d in days" role="button" ng-click="show(111)">
           <td ng-bind="d"></td>
           <td ng-bind="x"></td>
         </tr>
       </tbody>
     </table>
    </script>

现在 ng-repeat 和 ng-click 都适合我。