CODEWITHSUNDEEP
angularjstwitter-bootstrap
Hashem
Hashem

Reputation: 475

AngularJS directive not compiling inside a Bootstrap Popover

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.

enter image description here

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?

Upvotes: 0

Views: 243

Answers (1)

Arno_Geismar
Arno_Geismar

Reputation: 2330

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.

Upvotes: 2

Related Questions