AngularJS directive not compiling inside a Bootstrap Popover

Question

I'm new in AngularJS and I'm implementing an e-commerce solution.

I want the user to be able to hover over the cart icon to see the cart summary.

And I wrote a <cart></cart> directive by Angular and put it inside the data-content of the Bootstrap popover with data-html=true

<a href="javascript:" 
   data-toggle="popover" 
   data-trigger="manual" 
   data-placement="bottom" 
   data-html="true" 
   data-content="<cart></cart>">
   Cart
</a>

but the directive doesn't compile.

Many answers recommend using some other libraries like AngularStrap or AngularUI, but I want to know (to improve my information) why does that happen and how to workaround this.

What I think is that the popover does something like lazy-loading of the content, so the content is loaded after the stage of the AngularJS compiler. And I think that there is a way to tell AngularJS to re-compile this portion of code. Is that true and possible?

We could use your code, too... But you really can't have data-content="<cart></cart>". — Mikko Viitala
– Mikko Viitala, Commented Aug 8, 2016 at 8:09

Arno_Geismar · Accepted Answer · 2016-08-08 08:16:49Z

I think what you will need to do is the following:

popOver Directive:

myApp.
directive('popOverDirective', function ($compile) {
    return {
        restrict: 'E',
        replace: true,
        link: function (scope, element, attrs) {
            var htmlText = '<a href="javascript:" data-toggle="popover" data-    trigger="manual" data-placement="bottom" data-html="true" data-content="'+scope.content+'">Cart</a>';
            $compile(htmlText)(scope);
            element.replaceWith(template);


        }
    }
});

then in your html replace:

<a href="javascript:" data-toggle="popover" data-trigger="manual" data-placement="bottom" data-html="true" data-content="<cart></cart>">
    Cart
</a>

with:

<pop-over-directive></pop-over-directive>

your directive should be loaded before the bootstrap popover class and thus will also have initialized the content for it and I am assuming you have content on your scope.

Collectives™ on Stack Overflow

AngularJS directive not compiling inside a Bootstrap Popover

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related