CODEWITHSUNDEEP
javascriptjqueryangularjstwitter-bootstrapangularjs-directive
Kesarion
Kesarion

Reputation: 2848

Why does bootstrap popover not work inside my main template directive?

I'd like to use .popover on the following (from my template):

<li ng-repeat="(pid, product) in myProducts" class="status-indicator p{{pid}} {{product.status ? '' : 'disabled'}}"
                data-original-title="<?php echo _('Product status'); ?>"
                data-content="{{product.description}}: {{product.status ? '<?php echo _('enabled'); ?>' : '<?php echo _('disabled'); ?>'}}" status-indicator></li>

Popover won't work from my main directive:

spampanel.directive('domainTable', function() {
    return {
        replace:true,
        template: $('#domainTableTemplate').html(),
        link: function(scope, elem, attrs) {
            $(".status-indicator").popover({
                placement: 'right',
                trigger: 'hover'
            });
        }
    };
});

I tried a lot of things here, nothing worked.

If I make another directive specifically for those 'li' elements, it will work, but only with $apply:

spampanel.directive('statusIndicator', function() {
    return {
        link: function(scope, elem, attrs) {
            scope.$apply();
            elem.popover({
                placement: 'right',
                trigger: 'hover'
            });
        }
    };
});

Why do I have to use $apply for it to work properly ? If I don't use $apply, everything between braces comes out unevaluated "{{...}}".

It seems like I'm forcing something to execute before it's normal time, this doesn't seem right to me. If there's a time and a place where I should be placing this popover, when and where is it?

I'd much rather have just one directive here, but how could I make it work?

Upvotes: 0

Views: 319

Answers (1)

Poyraz Yilmaz
Poyraz Yilmaz

Reputation: 5857

angularjs does not know any changes which is made outside of the angularjs library, so you should wrap your code with $scope.$apply()...

here is very good article about $scope.$apply()...

besides that you can inspect angular-ui-bootstrap library to better understand how to code directives...

here is angular-ui-popover

Upvotes: 1

Related Questions