Reputation: 17
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
Reputation: 533
popover-template takes expression as parameter. try add quotes
popover-template="'user-menu.html'"
Upvotes: 4