2017-08-03 4 views
0

Je travaille sur une application qui a été écrite en AngularJS. Sur l'une des pages, un certain nombre de widgets sont affichés, qui affichent des informations sur les états des différents aspects de l'application. J'ai récemment travaillé sur l'ajout d'un bouton "Home" aux en-têtes de chaque widget, qui une fois cliqué, amènera l'utilisateur à la page "racine" appartenant à ce widget.En-tête de panneau AngularJS n'affiche qu'un élément lorsqu'il est défini dans une section

J'ai ce travail avec succès sur la plupart des widgets, cependant, sur l'un d'eux, si j'afficher le bouton « Home » dans la rubrique, ne s'affiche plus le nom widget dans la rubrique ...

le template utilisé dans le directive pour ce widget est défini comme:

.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>', 

quand je regarde la page avec le modèle tel est au-dessus, l'icône ti-home est affichée sur le titre du widget, et quand je clique dessus , Je suis amené à la page d'accueil pour ce widget particulier. Cependant, la rubrique widget (nom textuel widget) n'est pas affichée sur le widget comme il est:

widget with Home icon

Si je retire l'image ti-home de la rubrique widget (pour le changer à la façon dont il a été à l'origine), à ​​savoir

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>', 

Ensuite, la rubrique (nom du texte) est correctement affiché dans le widget, bien évidemment, le bouton « Home » que j'avais ajouté n'est plus là:

widget without Home icon

La raison pour laquelle je l'ai enlevé la -18n de l'étiquette <span data-i18n ... ></span> lors de l'ajout du bouton « Home » au widget épiaison parce que je crois savoir que l'utilisation -i18n signifie que vous ne serez en mesure d'afficher une chose dans cette balise.

J'ai essayé aussi d'ajouter la ligne de l'image dans le widget tête pendant que i18n était encore en usage:

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

mais lorsque vous regardez la page, seule la partie du texte de la rubrique est Affiché- pas l'image.

Comment puis-je afficher à la fois le texte & le bouton Accueil dans l'en-tête du widget en même temps?

Sur d'autres widgets utilisés sur la même page, j'ai pu ajouter le bouton « Home » sans la description textuelle étant retirée de la rubrique widget:

chart widget

Ce widget a le template suivant dans son directive:

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>', 

Je ne vois pas pourquoi cela fonctionne, mais ce que je suis en train de faire avec le widget « table » n'a pas ... Quelqu'un a des suggestions quant à la façon dont je peux obtenir bo Le widget "title" et le bouton "Home" sont-ils affichés dans la rubrique widget en même temps?

Répondre

0

Ah- repéré ce que la question a été: Je manque un > sur la classe panel:

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