angularjs ng-click not working inside the pop over directive

Question

I added some buttons in the pop over template.

When the page finishes loading the first time, clicking on the element on the page shows the popover, and when clicking on the buttons in the popover, every one works fine. But after hiding and showing the popover again, the buttons do not work any more.

I know that the pop over recreates the DOM node every time it is shown/hidden. So I added $compile(content)(scope), but it only works the first time.

Here is my directive:

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)

Here is the template:

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

@NidhishKrishnan it's correct, I think, why you think it's incorrect — Jusleong, May 22 '14 at 05:11

score 0 · Answer 1 · answered Jan 15 '15 at 18:43

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 not working inside the pop over directive

1 Answers1