Question

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

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

我知道弹出窗口每次显示/隐藏时都会重新创建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);

angularjs ng-click不在pop over指令内工作

1 个答案: