AngularJS-按鈕不顯示小工具「工具欄」

上我有一個angularJS應用程序，並在頁面中的一個，有一些顯示的小部件。當用戶點擊網頁上的「設置」按鈕（該按鈕是獨立於窗口小部件），對於每一個插件的「工具條」被顯示在窗口小部件，與每一個多個按鈕（取決於插件不同的按鈕工具欄屬於）。AngularJS-按鈕不顯示小工具「工具欄」

我目前正在一個新的按鈕添加到工具欄小工具，這將採取用戶到每個插件是從信息的相關頁面。

的directive其中小部件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 
     ... 
})

當我檢查「的窗口小部件之一的工具欄元素在瀏覽器中查看網頁時，我可以看到工具欄圖標由評論下方的部分顯示：

疊加編輯面板模板。

我嘗試添加在標記的按鈕，我要添加到小組件工具欄：

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

但由於某些原因，當我現在在瀏覽器中查看網頁時，按鈕我已經添加到小部件工具欄不顯示。

當我檢查「在瀏覽器工具欄上，我可以看到那些已經存在的其他按鈕的標記，但不能看到，我已經添加的按鈕標記...

誰能告訴我這是爲什麼？我在這裏做錯了什麼？

來源

2017-07-28 someone2088

我不確定您添加的按鈕的代碼片段的副本是否準確無誤地置於此處，但看起來您正在第一行過早地關閉該跨度。

它看起來應該是：

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

來源

2017-07-28 15:49:18 benjjcook

你說得對，我過早地關閉範圍，但是，我已經修復了，但我仍然有未顯示與該按鈕同樣的問題...... – someone2088

@ someone2088以防萬一你有沒有在你的實際代碼改變了它，您的編輯到主後仍然是錯誤的。的在第一行的末尾「>」不應該存在的，因爲它出現在第三行。只要確保你沒有在實際的代碼中做同樣的事情！ – benjjcook

AngularJS-按鈕不顯示小工具「工具欄」

回答

相關問題