CODEWITHSUNDEEP
javascriptjqueryangularjstwitter-bootstrapangular-ui
Paul
Paul

Reputation: 6737

ng-click does not fired inside compiled template

I'm trying to create a popover with custom html with angularjs and twitter bootstrap. Since this function has not been implemented in angular-ui, I'm trying to use bootstrap methods inside angular directive.

So I've created directive which contains such code:

link: function(scope, element, attrs) {
  var templateData = 
    "<button class='btn btn-default btn-sm cancel' ng-click='closePopover($event)'>Cancel</button>";

  var compliedData = $compile(templateData)(scope);
  angular.element(element).find('a')
    .popover({html: true,
              content: compliedData})
    .on('click', function(e) {
      e.preventDefault();
      return true;
    });
}

The problem I've got is that template is correctly added to the page, and popover works perfect. But ng-click method inside of compiled template does not fired at all.

What I'm doing wrong and how can I do it right?

Upvotes: 1

Views: 332

Answers (2)

maxisam
maxisam

Reputation: 22715

It is in UI Bootstrap. It's a subset of Angular UI

For more information, in UI bootstrap, popover uses $tooltip provider.

so you can use custom html without any issue. It is exactly what popover does.

Here is the working plunker

You need to have the following 2 directives

 .directive('xngPopover', ['$tooltip',
function($tooltip) {
  return $tooltip('xngPopover', 'popover', 'click');
}

]) .directive('xngPopoverPopup', [

function() {
  return {
    replace: true,
    scope: {
      title: '@',
      content: '@',
      animation: '@',
      isOpen: '='
    },
    templateUrl: 'tmp.html',
    controller: function($scope) {
      $scope.Hide = function() {
        $scope.isOpen = false;
      };
    }
  };
}

]);

The trigger is something like this 

 <span class='btn btn-success' xng-popover='test' popover-placement="bottom">test</span>

Upvotes: 0

Sergiu Paraschiv
Sergiu Paraschiv

Reputation: 10153

$.popover makes a copy of the HTML you feed it in the content config attribute. Event bindings are not copied. Nothing to do except stop using bootstrap's $.popover directly and start using bootstrap-ui or something similar.

Upvotes: 1

Related Questions