AngularJS - Comment obtenir le nom du fichier de modèle HTML actuel pour la vue UI?

Question

Mon application affiche une page HTML avec plusieurs vues, et chaque vue peut être conditionnellement construite à partir de plusieurs modèles HTML.

Je veux éditer chaque fichier HTML et ajouter quelques lignes en haut, quelque chose comme

Answer 1

Mise à jour : Vous pouvez avoir des modèles chargés avec ui-view et ng-include. L'exemple donné en bas de cette réponse a une belle directive générique pour retourner le nom du modèle correspondant même si vous avez imbriqué ui-view et ng-include ensemble. Cliquez sur les liens "Accueil", "À propos" et "Vue nommée" à l'intérieur de "À propos".

Quelques théories ci-dessous :

Si vous utilisez ui-view alors vous pouvez essayer ceci avec $state.current.templateUrl comme ci-dessous :

        Début du fichier {{getTemplate($state.current.views)}}

Mais vous pouvez jeter un œil à la directive générique ci-dessous qui couvre ui-view, ui-view imbriqués, ui-view nommés et ng-include et même un peu de complexité dans l'imbriquement avec ui-view et ng-include.

Directive générique avec une page d'exemple

Cliquez sur les liens "Accueil", "À propos" et "Vue nommée" à l'intérieur de "À propos"

var app = angular.module('app', ['ui.router']);

app.config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/');
      $stateProvider
      .state('home', {
        url: '/',
        templateUrl: 'home.html',
        controller: 'TestController'
      })
      .state('about', {
        url: '/about',
        templateUrl: 'about.html',
        controller: 'TestController'
      })
      .state('about.named', {
        url: '/named',
        views: {
           'named': {
             templateUrl: 'named.html',
             controller: 'TestController'
           }
        }
      });
    }
]);

app.controller('TestController', function($scope) {

});

app.directive('templateName', ['$state', function($state) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var templateName = $state.current.templateUrl;
      var includesParent = $(element).closest('[ng-include]');
      if(includesParent && includesParent.length > 0) {
        if(includesParent.find('[ui-view]').length === 0) {
           templateName = scope.$eval(includesParent.attr('ng-include'));
        }
      }

      if(!templateName && $state.current.views) {
        var uiViewParent = $(element).closest('[ui-view]');
        var viewName = $state.current.views[uiViewParent.attr('ui-view')];
        if(viewName) {
          templateName = viewName.templateUrl;
        }
      }

      element.html(templateName);
    }
  };
}]);

angular.bootstrap(document, ['app']);

  <h3>Page d'accueil</h3>
  <p>Début du fichier : <span template-name></span></p>

  <h3>Page À propos<h3>
  <p>Début du fichier : <span template-name></span></p>
  <div ng-include="'aboutUs.html'"></div>

  <h3>À propos de nous<h3>
  <p>Début du fichier : <span template-name></span></p>
  <a ui-sref="about.named">Vue nommée</a>
  <div ui-view="named"></div>

  <h3>Vue nommée<h3>
  <p>Début du fichier : <span template-name></span></p>

  <div class="navbar-header">
        <a class="navbar-brand" ui-sref="#">Début du fichier : <span template-name></span></a>
    </div>
    <ul class="nav navbar-nav">
        <li><a ui-sref="home">Accueil</a></li>
        <li><a ui-sref="about">À propos</a></li>
    </ul>