In my angularJS application, there is a page with multiple widgets displayed. When a user clicks on the 'Settings' button on the page (separate from the widgets), a toolbar for each widget appears showing different buttons depending on the widget.
Currently, I am attempting to add a new button to the widget toolbars that will take the user to the relevant page displaying information from each widget.
The directive responsible for rendering the widgets' HTML is:
.directive('umwWizard', function($q, $route, $modal, $timeout, $compile, ultUI,
umWidget, DialogMgr) {
var wizardTmpl = '<section ng-click="addWidget($event)" ' +
'class="glyphicon-clickable"><div data-ng-hide="swapTo != undefined">' +
'<span class="ti-widget"></span><p data-i18n="Click to add an item">' +
'</p></div></section>';
// Overlay editing panel template
var editPanelTmpl = '<div class="widget-preview-edit-panel">' +
'<span class="glyphicon glyphicon-transfer glyphicon-clickable" ' +
'data-ng-click="toggleSwapMode()" ' +
'data-ng-hide="!swap() || swapTo != undefined"></span>' +
'<span class="glyphicon glyphicon-cog glyphicon-clickable" ' +
'data-ng-click="editWidget()" ' +
'data-ng-hide="swapMode || swapTo != undefined"></span>' +
'<span class="glyphicon glyphicon-remove glyphicon-clickable"' +
' data-ng-click="deleteWidget()" ' +
'data-ng-hide="swapMode || swapTo != undefined"></span></div>';
// Button template to navigate to widget root
var navigateBtnTmpl = '<button type="button" data-ng-click="goToWidgetRoot()" ' +
'class="btn btn-sm btn-w-sm btn-gap-v btn-round wiz-navigate-me" ' +
'data-ng-show="navigateTo != region"><span data-i18n="Navigate to Widget Root"></span></button>';
return {
restrict: 'E',
// functions defined here
...
})
While inspecting the toolbar element of a widget in the browser, I noticed that the icons are shown under the comment:
Overlay editing panel template.
Upon adding the markup for the new button to the widget toolbar, like so:
'<span class="glyphicons glyphicons-more-windows">' +
'data-ng-click="goToWidgetRoot()" ' +
'data-ng-hide="swapMode || swapTo != undefined"></span>' +
However, after refreshing the page in the browser, the newly added button does not appear on the widget toolbar.
Even when inspecting the toolbar in the browser, the markup for the existing buttons can be seen but not for the new button I added...
If anyone knows what could be causing this issue or where I might be going wrong, please let me know. Thank you!