Angularjs的ng-click在pop over指令中不起作用

Question

我在弹出模板中添加了一些按钮。

当页面第一次加载完成时，点击页面上的元素会显示弹出窗口，当点击弹出窗口中的按钮时，每个按钮都可以正常工作。但是在隐藏并再次显示弹出窗口后，按钮不再工作。

我知道每次显示/隐藏DOM节点时，弹出都会重新创建DOM节点。所以我添加了$compile(content)(scope)， ，但它只在第一次工作。

这是我的指令:

app.directive "popOverWidthOffset", ($templateCache, $compile)->
    getTemplate = ()->
        template = $templateCache.get('angular/templates/popOverCustomisationChangeWidthOffset.html')
    restrict: 'A'
    replace: true
    scope: {
        argument: '='
        addwidth: '&'
        decreasewidth: '&'
        addoffset: '&'
        decreaseoffset: '&'
    }
    link: (scope, element, attrs)->
        content = getTemplate()
        console.log(content)
        popOverContent = $compile(content)(scope)
        options = {
            content: popOverContent,
            placement: "top",
            html: true,
            trigger: "click"
        }
        $(element).popover(options)

模板:

<table>
    <tbody>
        <tr>
            <td>
                <a class="btn btn-link" ng-click="addwidth(argument)">
                    <span class="glyphicon glyphicon-chevron-up">
                </a>
            </td>
            <td>&nbsp;</td>
            <td>
                <a class="btn btn-link">
                    <span class="glyphicon glyphicon-chevron-up" ng-click="addoffset(argument)">
                </a>
            </td>
        </tr>
        <tr>
            <td class="form-group" width="40px;">
                <input class="form-control" ng-model="argument.position[1]" style="text-align: center;">
            </td>
            <td> </td>
            <td class="form-group" width="40px;">
                <input class="form-control" ng-model="argument.position[2]" style="text-align: center;">
            </td>
        </tr>
        <tr>
            <td>
                <a class="btn btn-link" ng-click="decreasewidth(argument)">
                    <span class="glyphicon glyphicon-chevron-down">
                </a>
            </td>
            <td>&nbsp;</td>
            <td>
                <a class="btn btn-link">
                    <span class="glyphicon glyphicon-chevron-down" ng-click="decreaseoffset(argument)">
                </a>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

DEMO

(function(angular, $) {
  'use strict';
  PopoverCtrl.$inject = ['$scope', '$window'];
  function PopoverCtrl($scope, $window) {
    $scope.foo = 'scope foo';
    $scope.bar = function() {
      $window.alert('bar called');
    };
  }
  PopoverDirective.$inject = ['$templateCache', '$compile'];
  function PopoverDirective($templateCache, $compile) {
    return {
      controller: 'PopoverCtrl',
      link: popoverLinkFn
    };
    function popoverLinkFn(scope, elem) {
      /**
       * Initialise popover
       */
      function initPopover() {
        // Read content
        var content = $($templateCache.get('/popover.html'));
        // Compile it
        $compile(content)(scope);
        // Popover options
        var options = {
          html: true,
          content: content
        };
        elem.popover(options);
      }
      // Call init
      initPopover();
      // Cleanup on scope destroy
      scope.$on('$destroy', function() {
        elem.popover('destroy');
      });
    }
  }
  angular.module('app', [])
    .controller('PopoverCtrl', PopoverCtrl)
    .directive('popover', PopoverDirective);
})(window.angular, window.angular.element);