AngularJS - Comment obtenir le nom du fichier de modèle HTML actuel pour la balise ui-view?

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 modifier 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 renvoyer 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, 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é, ui-view nommé et ng-include et même un peu de nesting complexe 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>