AngularJS-ボタンがウィジェット「ツールバー」に表示されない

Question

私はangularJSアプリを持っていて、そのページの1つにウィジェットが表示されています。ユーザーがそのページの「設定」ボタンをクリックすると（ボタンはウィジェットとは別になっています）、各ウィジェットの「ツールバー」がウィジェットに表示され、それぞれのボタンにはさまざまなボタンが表示されますツールバーに属しています）。

私は現在、ウィジェットツールバーに新しいボタンを追加しようとしています。これにより、各ウィジェットが情報を表示している関連ページに移動します。

ウィジェットれる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>' + 

しかし、私は今、ブラウザでページを表示何らかの理由で、ボタンのため：私はウィジェットのツールバーに追加するボタンのマークアップに追加してみました

ウィジェットツールバーに追加しましたが表示されません。私は、ブラウザのツールバーには、私はすでにあった他のボタンのマークアップを見ることができる「検査」、私が追加したボタンのマークアップを見ることができない

...

これはなぜ誰に教えてもらえますか？私はここで間違って何をしていますか？

Answer 1

追加したいボタンのスニペットのコピープチプチがあなたがここに書こうとしていたものに対して正確かどうかは確かですが、スパンを最初の行で早く閉じているようです。それがあるべきように見えます

：

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