Verwenden Sie geschachtelte Zustände als Registerkarten in UI-Router

Question

Die Dokumentation scheint in diesem speziellen Fall ein wenig spärlich, aber ich arbeite von der this Tutorial "Multiple Views About Page" Abschnitt, der von this SO Post unterstützt wird.

Ich versuche, eine meiner Seiten in einen übergeordneten Status zu konvertieren, der jede Registerkarte als untergeordnete Zustände darstellt. Die folgende Syntax wirft keinen Fehler, jedoch werden nur die Tab-Header gerendert, keiner der Inhalte. Ich habe Breakpoints in den init Funktionen in den untergeordneten Controllern festgelegt und nichts wird ausgelöst, und ich bekomme keine Fehler zurück in der Konsole. Ich habe auch einen Breakpoint im $stateChangeError Rückruf erstellt und bekomme auch nichts.

geordneten Zustand

<div class="container"> 
    <h2> <i class="fa fa-user"></i> Click to Call Settings for {{user.fullName}}</h2> 
    <uib-tabset active="active" id="usersettings"> 
     <uib-tab index="0" heading="SIP Settings"> 
      <div ui-view="sipSettings"></div> 
     </uib-tab> 
     <uib-tab index="1" heading="Favorites"> 
      <div ui-view="favorites"></div>  
     </uib-tab> 
    </uib-tabset> 
</div>> 

favoritesPartial.html (aus Gründen der Raum bearbeitet)

<form name="favoritesForm"> 
    <div ng-repeat="favorite in pbxFavorites" id="favoritesContainer"> 

    </div> 
</form> 
<div class="form-footer"> 
    <button type="button" class="btn btn-white" ng-click="$root.goBack()">Go Back</button> 
    <button type="submit" class="btn btn-primary" ng-click="saveFavorites()">Save Favorites</button> 
</div> 

sipSettingsPartial.html (aus Gründen der Raum bearbeitet)

<form name="sipSettingsForm"> 
    <div class="row"> 

    <div class="form-footer"> 
     <button type="button" class="btn btn-white" ng-click="$root.goBack()">Go Back</button> 
     <button type="submit" class="btn btn-primary" ng-click="savePbxSettings()">Save Settings</button> 
    </div> 
</form> 

Zustand Anbieter

 .state('clickToCall', { 
      url: '/clickToCall', 
      templateUrl: 'app/components/clickToCall/clickToCall.html', 
      controller: 'ClickToCallController', 
      controllerAs: 'vm', 
      parent: 'app', 
      authenticate: true, 
      resolvePolicy: {when:'LAZY', async: 'WAIT'}, 
      resolve:{ 
       security:['$q', '$rootScope', 'parentResolves', 'routeErrors', function($q, $rootScope, parentResolves, routeErrors){ 
        if($rootScope.isLoggedIn()){ 
         return $q.resolve(); 
        } else { 
         return $q.reject(routeErrors.NO_ACCESS); 
        } 
       }] 
      }, 
      params:{ 
       'user':'' 
      }, 
      view:{ 
       'sipSettings@clickToCall': { 
        templateUrl: 'app/components/clickToCall/sipSettingsPartial.html', 
        controller: 'SipSettingsController' 
       }, 
       'favorites@clickToCall':{ 
        templateUrl: 'app/components/clickToCall/favoritesPartial.html', 
        controller: 'FavoritesController' 
       } 
      } 
     }) 

Ordnerstruktur

screen shot

Answer 1

Stupid Tippfehler ...... genannt der Abschnitt view anstelle von views, verließ auch die templateUrl im Parent-Status. Die folgende Konfiguration funktioniert:

 .state('clickToCall', { 
      url: '/clickToCall', 
      controller: 'ClickToCallController', 
      controllerAs: 'vm', 
      parent: 'app', 
      authenticate: true, 
      resolvePolicy: {when:'LAZY', async: 'WAIT'}, 
      resolve:{ 
       security:['$q', '$rootScope', 'parentResolves', 'routeErrors', function($q, $rootScope, parentResolves, routeErrors){ 
        if($rootScope.isFirmAdmin2 || $rootScope.isCloud9){ 
         return $q.resolve(); 
        } else { 
         return $q.reject(routeErrors.NO_ACCESS); 
        } 
       }] 
      }, 
      params:{ 
       'user':'' 
      }, 
      views:{ 
       '':{ 
        templateUrl: 'app/components/clickToCall/clickToCall.html' 
       }, 
       'sipSettings@clickToCall': { 
        templateUrl: 'app/components/clickToCall/sipSettingsPartial.html', 
        controller: 'SipSettingsController' 
       }, 
       'favorites@clickToCall':{ 
        templateUrl: 'app/components/clickToCall/favoritesPartial.html', 
        controller: 'FavoritesController' 
       } 
      } 
     })