Ionic Framework - Angular html bao gồm

Tôi đang xây dựng một ứng dụng với Khung Ionic. Tôi đang sử dụng điều hướng tab.Ionic Framework - Angular html bao gồm

angular.module('myapp', ['ionic']) 

.config(function ($stateProvider, $urlRouterProvider) { 

$stateProvider 
    .state('tabs', { 
     url: "/tab", 
     abstract: true, 
     templateUrl: "templates/tabs.html" 
    }) 
    .state('tabs.home', { 
     url: "/home", 
     views: { 
      'home-tab': { 
       templateUrl: "templates/home.html", 
       controller: 'HomeTabCtrl' 
      } 
     } 
    }) 
    .state('tabs.news', { 
     url: "/news", 
     views: { 
      'news-tab': { 
       templateUrl: "templates/news.html" 
      } 
     } 
    })....

Đầu tiên tôi đã viết tất cả các mã trong 1 file html, sau đó cho giám sát tốt hơn tôi muốn sử dụng html bao gồm:

<body> 
<!-- Layout Setup --> 
<ion-nav-bar class="bar-app"></ion-nav-bar> 
<ion-nav-view></ion-nav-view> 

<script id="templates/tabs.html" type="text/ng-template"> 
    <div ng-include="'sub/tabs.html'"></div> 
</script> 

<script id="templates/home.html" type="text/ng-template"> 
    <div ng-include="'sub/home.html'"></div> 
</script> 

<script id="templates/news.html" type="text/ng-template"> 
    <div ng-include="'sub/news.html'"></div> 
</script> 
....

home.html:

<ion-view view-title="" hide-nav-bar="true"> 
    <ion-content class="padding app-home" scroll="false"> 
     <div class="app-image"> 
      <img class="full-image" src="img/app-logo.svg"> 
     </div> 
     <div class="row app-home-buttons"> 
      <div class="col"> 
       <a href="#/tab/news"> 
        <button class="button button-balanced button-block icon-top"><i class='icon ion-ios-paper-outline'></i><span>News</span> 
        </button> 
       </a> 
      </div> 
    </ion-content> 
</ion-view>

news.html:

<ion-view view-title="News" ng-controller="NewsRefreshCtrl"> 
    <ion-content class=""> 
     <ion-refresher on-refresh="doRefresh()"> 

     </ion-refresher> 
     <div class="list"> 

      <a class="item item-thumbnail-left item-text-wrap" href="#"> 
       <img src="img/tile-icon.png"> 
       <h2>Lorem consetetur sadipscing</h2> 
       <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At v</p> 
      </a> 
      </a> 

     </div> 

    </ion-content> 
</ion-view>

Bây giờ tôi gặp sự cố rằng thanh có tiêu đề trang web không hoạt động nữa. Nó không hiển thị tiêu đề và nội dung html đi kèm được đặt ở trên cùng bên dưới thanh. Có thể đó là do do nó bao gồm trong thẻ div bây giờ?

Tôi làm cách nào để giải quyết vấn đề này?

Nguồn

2015-06-07 temporalis

Bạn đã xem xét các mẫu tab của ion? Nó cho thấy cách xử lý hoàn hảo các tab và các tệp html khác nhau. Chỉ cần gõ 'ionic starter myApp tabs' và xem xét các tập tin được tạo ra. – QueryLars

omg, tôi ngu ngốc ... cảm ơn! Đang ở trong mã đã được .. – temporalis

Tôi đã chuyển các mẫu của mình vào thư mục/mẫu và xóa các thẻ

tôi giải quyết vấn đề này bằng cách <div ng-include...> bên <ion-view> trong phạm vi <ion-tab>. Dưới đây là cấu trúc bạn có thể phải thử

<ion-pane> 
     <ion-tabs> 
      <ion-tab title="Tab 1"...> 
       <ion-view> 
        <div ng-include src="'templates/tab1.html'"></div> 
       </ion-view> 
      </ion-tab> 
      <ion-tab title="Tab 2"... > 
       <ion-view> 
        <div ng-include src="'templates/tab2.html'"></div> 
       </ion-view> 
      </ion-tab> 
     </ion-tabs> 
    </ion-pane>

tôi đóng gói các mẫu (tab1.html ..) trong vòng <ion-content> templates/tab1.html

<ion-content> 
    <!--Your Template Content Goes here--> 
</ion-content>

Cấu trúc này hoạt động giống như một nét duyên dáng cho tôi.

http://forum.ionicframework.com/t/tabs-and-ng-include/7863/4?u=kousikraj

Nguồn

2015-08-12 10:47:18 kousikraj

Cách này cũng phù hợp với tôi – bklups

Đây là cũ, nhưng giải pháp tốt nhất không được đăng. Tôi tìm thấy giải pháp trong khi tôi vẫn còn mở này vì vậy tôi figured tôi sẽ đóng góp trong trường hợp bất cứ ai khác tìm thấy điều này. Bạn chỉ có thể sử dụng chỉ thị ng-include vì đó là thẻ riêng của mình

<ion-slide-box> 
       <ion-slide> 
        <ng-include src="'templates/slide1.html'"></ng-include> 
       </ion-slide> 
       <ion-slide> 
        <ng-include src="'templates/slide2.html'"></ng-include> 
       </ion-slide> 
       <ion-slide> 
        <ng-include src="'templates/slide3.html'"></ng-include> 
       </ion-slide> 
       <ion-slide> 
        <ng-include src="'templates/slide4.html'"></ng-include> 
       </ion-slide> 
</ion-slide-box>

Không cần xem ion trong mỗi trang chiếu.

Nguồn

2017-04-02 05:10:38 cassiusclay

Các vấn đề liên quan