Angularjs popover plugin not working correctly

Question

I'm novice to angularjs. I've a problem with Popover jquery plugin, I've created a directive for it and don't know why it's not working correctly

here is a plunker link

Khanh TO · Accepted Answer · 2014-01-26 11:16:08Z

1

Your binding is read without evaluation against the current scope. You could do evaluation manually using scope.$eval.

Try reading the data as text and evaluate manually:

var api = scope.$eval($(this).attr('data-api'));

DEMO

Another solution using $timeout to schedule the function to the next phase to ensure that angular has finished its bindings => we don't need to use scope.$eval anymore:

app.directive('popover', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      $timeout(function(){
          element.popover({
          trigger: 'hover',
          html: true,
          content: function() {
            var api = angular.fromJson(attrs.api);

            return (
              '<ul><li>' + api[0] + ',' + api[1] + '</li><li>' + api[2] + ',' + api[3] + '</li>');
          }
        });
      });
    }
  };
});

DEMO

edited Jan 26, 2014 at 11:16

answered Jan 26, 2014 at 10:37

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ahmed Hashem Over a year ago

Thanks, but why the title still have problem?

Khanh TO Over a year ago

@Ahmed Hashem: I added another solution, I think it's better to let angular do the bindings, we avoid doing it ourselves which may conflict with angular bindings and create unpredictable results.

Collectives™ on Stack Overflow

Angularjs popover plugin not working correctly

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related