Question

我想在我的popover中显示一个可点击的表，并在单击其中一行时调用一个函数。我的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（＆＃39; plunker＆＃39;，[]）;

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绑定，但是在days成功，我已经尝试了一些事情，如果我改变了写link函数的方式，那么ng-click就可以了，但不是ng-repeat，这意味着在这种情况下它无法绑定days。

更新的DEMO使用templateUrl而不是数据内容属性

<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对我来说都很好。

ng-click在bootstrap popover内容中不起作用

1 个答案: