Question

我有一个用angularjs和IONIC famework构建的应用程序。在页面中，我尝试通过ng-directive插入导航标题栏。模板已正确加载（我在控制台中看到消息：＆＃39; XHR已完成加载：GET＆＃34; http://localhost:45678/assets/tmpl/navigation-header.html＆＃39 ; 但是html没有显示在页面中，因为高度和宽度被设置为＆＃39; 0＆＃39;，好像，由于某种原因，它没有被精心制作，或者被设置，或类似的东西。

这里是html：

<ion-view title="LANGUAGES">
  <div ng-include="'assets/tmpl/navigation-header.html'"></div>
  <ion-content class="has-header">
....

这是包含的文件：

<ion-nav-bar class="bar-positive nav-title-slide-ios7">
  <ion-nav-back-button class="button-icon icon ion-ios7-arrow-back"></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-buttons side="right">
  <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>

正如我上面所写，我可以看到检查器中生成的html，但是在结果视图中没有，如果我将鼠标放在consolle中，Chrome说它有高度：0和宽度：0。 / p>

任何想法或建议???

非常感谢。

Answer 1

您需要使用src提供网址，如下所示

 <ion-view title="LANGUAGES">
      <div ng-include src="'assets/tmpl/navigation-header.html'"></div>
      <ion-content class="has-header">

Answer 2

如离线论坛（http://forum.ionicframework.com/t/ion-nav-bar-ng-include-not-working/13725/4）中的这篇文章所示，解决此问题的最佳方法是使用＆lt;覆盖导航栏。 ion-header＆gt;，写在＆lt;离子视图＆gt;。一定要把＆hide;中的hide-nav-bar =“true”放入离子视图＆gt;否则你会有两个标题。用＆lt; <离子头> ＆lt; ng-include＆gt;工作正常。

  <ion-view hide-nav-bar="true">

    <ion-header-bar align-title="center" class="bar-dark">
       <div class="buttons">
          <a class="button button-icon icon ion-chevron-left" ng-href="#/app/home"> Back</a>
       </div>
      <h1 class="title"></h1>
      <div class="buttons">
         <a class="button button-icon icon ion-plus" ng-href="#/app/something"></a>
        <a class="button button-icon icon ion-minus" ng-href="#/app/something else"></a>
     </div>
  </ion-header-bar>

  <ion-content class="has-header">
    <p>some content</p>
  </ion-content>

</ion-view>

Angular ng-include已加载但未显示

2 个答案: