UI önyükleme durumları ui-bootstrap sekmelerinin içeriğine nasıl yüklenir

Köşeli bir öğrenme yapıyorum ve bir HTML dosya parçasını dinamik olarak bir sekmenin içerik bölmesine yüklemeye çalışıyorum.UI önyükleme durumları ui-bootstrap sekmelerinin içeriğine nasıl yüklenir

this linked plunker ben devletleri

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

    app.config([ 
     '$stateProvider', 
     '$urlRouterProvider', 
     function ($stateProvider, $urlRouterProvider) { 

      $stateProvider   
       .state("tab1", { url: "/tab1", templateUrl: "tab1.html" }) 
       .state("tab2", { url: "/tab2", templateUrl: "tab2.html" }) 
       .state("tab3", { url: "/tab3", templateUrl: "tab3.html" }); 
      $urlRouterProvider.otherwise('/'); 
     }]); 

    app.controller("tabsController", function ($rootScope, $scope, $state) { 

     $scope.tabs = [ 
      { title: "My Tab 1", route: "tab1", active: true }, 
      { title: "My Tab 2", route: "tab2", active: false }, 
      { title: "My Tab 3", route: "tab3", active: false }, 
     ]; 

     $scope.go = function (route) { 
      $state.go(route); 
     }; 

     $scope.active = function (route) { 
      return $state.is(route); 
     }; 

     $scope.$on("$stateChangeSuccess", function() { 
      $scope.tabs.forEach(function (tab) { 
       tab.active = $scope.active(tab.route); 
      }); 
     }); 
    });

ve index.html vücutta ui-görüntülemek devlet ile ilişkilendirilecek bir isim/rota

<body ng-app="Plunker"> 
    <div ng-controller="tabsController"> 
     <uib-tabset> 
      <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled"> 

       <div ui-view="{{tab.route}}"></div> 

      </uib-tab> 
     </uib-tabset> 
    </div> 
    </body>

atamak yapılandırmak için bir açısal modül oluşturduk

Her sekmede, ilgili html dosya parçasından tab1.html, tab2.html veya tab1.html'den içerik bulunmalıdır. Ama işe yaramayacağım. Bu işi yapmak için herhangi bir yardım çok takdir edilecektir.

kaynak

2015-10-14 Kickaha

Bkz er rota, '' 'demenize gerek yok sadece sekmeleri css ve düzenli bağlantılar – charlietfl

@charlietfl teşekkürler aklımda tutacağım. – Kickaha

Her sekme için bir kısmi sahip olmak istersiniz. Bunun için, ui yönlendiricisinin isimli görünümleri size yardımcı olabilir. Durumu değiştirmezsiniz, ancak içeriği özel görünümlerde bulundurmak, ana şablon ışığını korumanıza ve güzel bir şekilde kodunuzu düzenlemenize olanak tanır. Üstelik sekme şablonlarını başka yerlerde de kullanabilirsiniz. tabset'ine bileşeni bulunduğu

Devlet tanımı:

$stateProvider .state('example', { url: '/example', views: { "tab1": { templateUrl: "tab1.html" }, "tab2": { templateUrl: "tab2.html" }, "tab3": { templateUrl: "tab3.html" }, }

tabset'ine tanımı: Bir sekme p istiyorsanız

<uib-tabset> <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" ...> <div ui-view="{{tab.route}}"></div>  </uib-tab> </uib-tabset>

updated plunker

kaynak

2015-10-14 00:56:30

Teşekkür ederiz. – Kickaha

Bu, üzerinde çalıştığım şeylere doğrudan uygulanmıyor, ancak kodunuzu gerçekten burada seviyorum. Teşekkürler! –

Ayrı bir gezinme kısmi şablonum varsa ve menüdeki her öğenin içinde durum tanımına sahip bir ui-sref öğesi varsa bunu nasıl sağlayabilirim, denetleyicinin yeni bir sekme öğesi eklemesini ve tüm içeriğin devlet sağlayıcıda templateUrl yapılandır. Şu anda bir öğeyi tıklattığımda ui-view öğesinin içindeki içeriği yükler, böylece yeni bir sekme eklemek yerine içeriği yalnızca ilk sekmede ekler, hiçbir zaman yeni bir sekme oluşturmaz –

UI önyükleme durumları ui-bootstrap sekmelerinin içeriğine nasıl yüklenir

cevap

İlgili konular