douk
douk

Reputation: 17

AngularJS Popover w/ Template Doesn't Show

I am trying to create a UI Bootstrap popover in AngularJS that works fine in my CodePen, but when I try to transfer it to my work it doesn't show up at all. When trying out the popovers from the UI Bootstrap Demos, the Dynamic Popover DOES work. The only issue I'm getting is with the Popover w/ Template.

As this is part of a larger code, ng-app and controller are declared elsewhere.

Here is my code:

top.html

<div class="top_bar">
    <div class="logo">
        <a ui-sref="main.chat">
            <img src="images/logo.svg" alt="logo" />
        </a>
    </div>
    <!-- START Popover -->
    <a class="user-settings" popover-placement="bottom" popover-template="user-menu.html" popover-trigger="click">
        <span class="user-name">{{sidebarController.get_name()}}</span>
        <img src="images/avatar.png" />

        <script id="user-menu.html" type="text/ng-template">
            <p><a href="#">{{ edit_profile }}</a></p>
            <button class="btn btn-default">Logout</button>
            <button class="btn btn-default">Admin Panel</button>
        </script>


    </a>
    <!-- END Popover -->
</div>

app.js

(function () {
'use strict';

angular.module(
    'bst.topbar',
    [
        'ui.bootstrap',
        'bst.uirouter'
    ]
);

}());

controller.js

(function() {
    'use strict';

    /**
     * Controller for topbar
     */
    var topbar_controller = function(
        $state,
        topbarService,
        sidebarService,
        sidebarStorer,
        profileStorer
    ) {
        this.$state = $state;
        this.currentUserId = sidebarService.currentUserId;
        this.get_name = sidebarService.get_name.bind(this);
        this.vCardStorage = profileStorer.get_storage();
        this.set_tab = sidebarStorer.set_current_tab;

        $state.edit_profile = 'Edit Profile';
    };

    angular.module('bst.topbar').controller(
        'bst.topbar.Controller', [
            '$state',
            'bst.topbar.Service',
            'bst.sidebar.Service',
            'bst.sidebar.Storer',
            'bst.profile.info.Storer',
            topbar_controller
        ]
    );

}());

Upvotes: 1

Views: 835

Answers (1)

Rayz
Rayz

Reputation: 533

popover-template takes expression as parameter. try add quotes

popover-template="'user-menu.html'"

Upvotes: 4

Related Questions