AngularJS 面板标题在一个部分内定义时仅显示一个元素

Question

我正在开发一个用 AngularJS 编写的应用程序。在其中一个页面上，显示了许多小部件，这些小部件显示有关应用程序各个方面的状态的信息。我最近一直致力于为每个小部件的标题添加一个 'Home' 按钮，单击该按钮会将用户带到属于该小部件的 'root' 页面。

我已经在大多数小部件上成功运行，但是，在其中一个小部件上，如果我在标题中显示 'Home' 按钮，小部件名称将不再显示在标题中。 .

在 directive 中用于此小部件的 template 定义为：

.directive('table', function(tag, $location){
    return{
        restrict: 'E',
        scope: {
            ...
        },
        template: '<section class="panel-frame" ' +
                  'data-ng-class="{\'panel-brand\': !inverse(), ' +
                  '\'panel-inverse panel-inverse-borderless\': inverse()}">' +
                  'div class="panel-heading" ' +
                    '<span data="{{heading}}"></span>' +
                    '<i class="pull-right ti-home" data-ng-click="browserPage()" /> ' +
                    '<data-ng-show="heading">' +
                  '</div><ul-grid config="config" rows="tableRows || rows">' +
                  '</ul-grid></section>',

当我使用上面的模板查看页面时，ti-home 图标显示在小部件标题上，当我单击它时，我被带到 'home' 页面以获取那个特定的小部件。但是，小部件标题（小部件的文本名称）当前未按原样显示在小部件上：

如果我从小部件标题中删除 ti-home 图片（因此将其改回原来的样子），即

template: '<section class="panel panel-frame" ' +
          'data-ng-class="{\'panel-brand\': !inverse(), ' +
          '\'panel-inverse panel-inverse-borderless\': inverse()}">' +
          '<div class"panel-heading" ' +
            '<span data-i18n="{{heading}}"></span>' +
            '<data-ng-show="heading">' +
          '<div><ul-grid config="config" rows="tableRows || rows">' +
          '</ul-grid></section>',

然后标题（文本名称）在小部件中正确显示，但很明显，我添加的 'Home' 按钮不再存在：

我在将 'Home' 按钮添加到小部件标题时从 <span data-i18n ... ></span> 标记中删除 -18n 的原因是因为据我了解，使用 -i18n 意味着您将只能在该标签中显示一件事。

我还尝试在 i18n 仍在使用时在小部件标题中添加图像行：

'<i class="pull-right ti-home" data-ng-click="browserPage()" /> ' +

但是在查看页面时，仅显示标题的文本部分，而不显示图像。

如何在小部件的标题中同时显示文本和主页按钮？

在同一页面上使用的其他小部件上，我可以添加 'Home' 按钮，而不会从小部件标题中删除文本描述：

此小部件在其 directive 中具有以下 template：

    template: '<section class="panel panel-frame" data-ng-class="{\'panel-brand\': !inverse(), \'panel-inverse\': inverse()}">' +
              '<div class="panel-heading">' +
              '<span data-i18n="{{title}}"></span>' +
              '<i data-ng-hide="hideChartPageBtn" class="pull-right glyphicon-clickable ti-bar-chart" data-ng-click="chartPage()"></i>' +
              '<i class="pull-right ti-home" data-ng-click="chartPage()" />' +
              '<div class="umw-chart-cfg-btn-group" data-ng-if="chartCfgs.length">' +

              '<a href="" data-ng-click="btnQty = minBtns" data-ng-show="btnQty > minBtns && chartCfgs.length > minBtns" ' +
              'class="btn btn-sm"><span class="ti-angle-double-right"></span></a>' +

              '<button type="button" class="btn btn-{{conf.state}} btn-sm" data-ng-show="chartCfgs.length > 1"' +
              'data-ng-click="redrawChart(conf)" data-ng-repeat="conf in chartCfgs | limitTo: btnQty">{{$index + 1}}</button>' +
              '<a href="" data-ng-click="btnQty = chartCfgs.length" data-ng-show="chartCfgs.length > btnQty" ' +
              'class="btn btn-sm"><span class="ti-angle-double-left"></span></a>' +
              '</div></div>' +
              '<um-chart control="control"></um-chart>' +
              '</section>',

我不明白为什么会这样，但我试图用 'table' 小部件做的事情没有...任何人对我如何获得小部件有任何建议 'title' 和 'Home' 按钮同时显示在小部件标题中？

Answer 1

啊- 发现问题所在：我在 panel class:

上遗漏了一个 >

'<div class="panel-heading" >' +

AngularJS 面板标题在一个部分内定义时仅显示一个元素

AngularJS panel heading only displays one element when defined inside a section

user-interface

widget

presentation

angularjs