$ stateProvider AngularJS arbeitet nicht

Question

Ich habe Taste auf meiner Seite, wie unten:

<button ui-sref=".viewer({maId: gridItem.MAID})" class="btn btn-info"> 
    <span class="glyphicon glyphicon-search"></span> 
</button> 

Auf Klick Zustand ändern I `d gerne mit ui-sref. Ich bin gerade im Status/Status und möchte in den Status/Status gehen.

Hier ist meine routes.js

(function() { 
    'use strict'; 

    angular 
    .module('MA.status') 
    .config(function ($stateProvider) { 
     $stateProvider 
      .state('status', { 
       url: '/status', 
       controller: 'Status as vm', 
       templateUrl: 'app/pages/status/status.html?v=0.0.1' 
      }) 
      .state('status.viewer', { 
       url: '/:maId', 
       controller: "Viewer as vm", 
       templateUrl: 'app/pages/status/viewer.html?v=0.0.1', 
       resolve: { 
        maId: function ($stateParams) { 
         return ($stateParams.id); 
        } 
      } 
      }); 
    }); 
})(); 

Wenn ich die Schaltfläche URL Änderungen klicken, aber html tut es templateUrl ist nach wie vor von Status Status ändern nicht den Status/{} Zofe. Es gibt keine Fehler in der Konsole.

Was ist das Problem?

Answer 1

Ihre ui-Sref auf Ihre Schaltfläche sollte wie folgt sein:

<button ui-sref="status.viewer({maId: gridItem.MAID})" class="btn btn-info"> 
    <span class="glyphicon glyphicon-search"></span> 
</button> 

Sie haben immer den ganzen Staat Namen einzufügen, die in Ihre Routen deklariert wird.

EDIT:

Ohne Ihre ganze HTML-Struktur basierend auf Ihren Kommentar zu sehen, ich würde vermuten, Sie vermissen die ui-view Direktive in Ihren Status Zustand Vorlage. Wenn Sie untergeordnete Status verwenden, muss der übergeordnete Benutzer diesen haben, damit er den Inhalt/die Vorlage des untergeordneten Elements anzeigen kann. Sie können den Status status.viewer als einen ganz separaten Status festlegen, wenn Sie möchten, dass er so funktioniert, wie Sie ihn jetzt haben. Aber wenn Sie möchten, dass es als Kind-Status ist, fügen Sie das irgendwo in Ihrem status-Status hinzu und der Inhalt des Kind-Status wird angezeigt.

<div ui-view></div> 

So machen die ui-sref ändern und die ui-view zu Ihren Eltern Zustand Vorlage hinzufügen.