Question

我有一个angularJS应用程序，在其中一个页面上，显示了许多小部件。当用户点击“设置”时该页面上的按钮（该按钮与小部件分开），工具栏＆＃39;每个小部件都显示在小部件上，每个小部件上有许多按钮（不同的按钮取决于工具栏所属的小部件）。

我目前正在尝试向窗口小部件工具栏添加一个新按钮，这会将用户带到每个窗口小部件显示信息的相关页面。

小部件中的directive＆＃39;呈现的HTML是：

.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>'; /* +
    /*ERF(28/07/2017 @ 1030) Add 'naviateToPage' button to the widget toolbar
    '<span class="ti-layers" ' +
    'data-ng-click="goToWidgetRoot()" ' +
    'data-ng-hide="swapMode || swapTo != undefined"></span></div>'; */

// Swap me button template
var swapMeBtnTmpl = '<button type="button" data-ng-click="swapMe()" ' +
    'class="btn btn-sm btn-w-sm btn-gap-v btn-round wiz-swap-me" ' +
    'data-ng-show="swapTo != undefined"><span data-i18n="Swap with me" ' +
    'data-ng-show="swapTo != region"></span><span data-i18n="Cancel" ' +
    'data-ng-show="swapTo == region"></span></button>';




return {
    restrict: 'E',
        // functions defined here
        ...
})

当我检查＆＃39;在浏览器中查看页面时，其中一个小部件的工具栏元素，我可以看到工具栏图标显示在评论下面的部分：

覆盖编辑面板模板。

我尝试添加要添加到窗口小部件工具栏的按钮的标记：

'<span class="glyphicons glyphicons-more-windows">' +
'data-ng-click="goToWidgetRoot()" ' +
'data-ng-hide="swapMode || swapTo != undefined"></span>' +

但出于某种原因，当我现在在浏览器中查看该页面时，我没有显示我添加到窗口小部件工具栏的按钮。

当我检查＆＃39;浏览器中的工具栏，我可以看到已经存在的其他按钮的标记，但无法看到我添加的按钮的标记...

谁能告诉我为什么会这样？我在这里做错了什么？

Answer 1

我不确定您添加按钮的片段的copypaste是否与您打算在此处放置的内容相符，但看起来您在第一行中提前关闭了跨度。< / p>

看起来应该是：

'<span class="glyphicons glyphicons-more-windows" ' +
'data-ng-click="goToWidgetRoot()" ' +
'data-ng-hide="swapMode || swapTo != undefined"></span>' +

AngularJS-按钮不显示在小工具栏上＆＃39;

1 个答案: