Question

我的应用显示了一个包含多个视图的HTML页面，每个视图都可以从多个HTML模板中有条件地构建。

我想编辑每个HTML文件，并在顶部添加几行，如

<div ng-if="showFileNames”>
   <hr>
        <p>Start of file {{how do I get the file name}}</p>
   <hr>
</div>

也许页脚也一样。

因此，通过将$scope. showFileNames设置为true，我可以打开/关闭文件名的显示，看看我的页面是如何实际编写的（这是清楚的，还是应该添加一些ascii art ？）。

我只是每个文件中的硬代码{{how do I get the file name}}，但动态执行意味着我可以更轻松地将代码添加到每个文件中，加上它防止文件被重命名。

可以吗？如果是这样，怎么样？

[更新]我刚刚意识到这个问题没有解释得那么好。遗憾。

我需要强调我所说的部分

每个视图都可以从多个HTML模板中有条件地构建

虽然视图是基于状态的，但其内容是根据数据从不同的<ng-include>文件构建的。

因此，状态A可能包含A.html，但根据数据，该视图可能是<ng-include> B.html，C.html和E.html，或它可能是<ng-include> F.html，G.html和H.htFl - 我想在头部和后部显示每个文件的名称。每个文件显示的视图部分的脚

Answer 1

更新：您的模板可能已加载ui-view和ng-include。即使您将directive和ui-view嵌套在一起，此答案底部给出的示例也有一个很好的通用ng-include来返回相应的模板名称。点击＆＃34; 主页＆＃34;，＆＃34; 关于＆＃34;和＆＃34; 命名视图＆＃34;内部链接＆＃34;关于＆＃34;。

下面几乎没有理论，

如果您使用ui-view，则可以使用$state.current.templateUrl进行尝试，如下所示。

<div ng-if="showFileNames”>
   <hr>
        <p>Start of file {{$state.current.templateUrl}}</p>
   <hr>
</div>

如果您已将state定义如下

，则上述方法将有效

.state('state1', {
  url: '/state1',
  templateUrl: 'partials/state1.html'
  controller: 'State1Ctrl'
})

但如果您已将此定义为named views，则

$stateProvider
  .state('report',{
    views: {
      'filters': {
        templateUrl: 'report-filters.html',
        controller: function($scope){ ... controller stuff just for filters view ... }
      }
      }
    }
  })

然后，您可以更好地使用下面的$rootScope分配方法，并将$state.current.views从html传递给函数。

$rootScope.getTemplate = function(view) {
   var keys = Object.keys(view);
   if(keys.length === 0) return '';

   return view[keys[0]].templateUrl;
};

和html，

<div ng-if="showFileNames”>
   <hr>
        <p>Start of file {{getTemplate($state.current.views)}}</p>
   <hr>
</div>

但是你可以查看下面的通用directive，其中包含ui-view，嵌套的ui-view，命名为ui-view和ng-include，甚至还有一些与ui的复杂嵌套-view和ng-include。

包含示例页面的通用directive

点击＆＃34; 主页＆＃34;，＆＃34; 关于＆＃34;和＆＃34; 命名视图＆＃34;内部链接＆＃34;关于＆＃34;

＆＃13;

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']);

＆＃13;

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>

<div>
  <!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation" ng-include="'nav.html'">
</nav>

<!-- MAIN CONTENT -->
<div class="container">

    <!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
    <div ui-view></div>

</div>

<script type="text/ng-template" id="home.html">
  <h3>Home Page</h3>
  <p>Start of file: <span template-name></span></p>
</script>

<script type="text/ng-template" id="about.html">
  <h3>About Page<h3>
  <p>Start of file: <span template-name></span></p>
  <div ng-include="'aboutUs.html'"></div>
</script>

<script type="text/ng-template" id="aboutUs.html">
  <h3>About us<h3>
  <p>Start of file: <span template-name></span></p>
  <a ui-sref="about.named">Named View</a>
  <div ui-view="named"></div>
</script>

<script type="text/ng-template" id="named.html">
  <h3>Named View<h3>
  <p>Start of file: <span template-name></span></p>
</script>

<script type="text/ng-template" id="nav.html">
  <div class="navbar-header">
        <a class="navbar-brand" ui-sref="#">Start of file: <span template-name></span></a>
    </div>
    <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="about">About</a></li>
    </ul>
</script>
</div>

＆＃13;

AngularJS - 如何获取ui-view的当前HTML模板文件的名称？

1 个答案: