2017-01-15 3 views
0

Ich versuche, einen Komponenten-Controller zu implementieren, der den aktuellen Zustand aus der Definition in UI-Router-Konfiguration verwendet.

Ich benutze angular 1.6.1 mit UI-Router 0.3.2.

Was ich beim Debuggen beobachte, ist, dass in der Steuerung der Zustand im Grunde ein nicht besetztes Objekt ist. Es hat die Felder aber keine Werte.

Aber wenn ich es an den Bereich binden und in der Benutzeroberfläche rendern, hat es die richtigen Werte in der Benutzeroberfläche, so kann ich annehmen, dass die Werte einige Zeit nach der Ausführung des Controllers in den aktuellen Zustand gebunden werden.

Gibt es irgendeine Art von Zustandsinitialisierung, die auch für das Objekt current state erforderlich ist, das in den Controller eingefügt werden soll?

$state.current Definition an der Stelle der Controllers Codeausführung:

{"name":"","url":"^","views":null,"abstract":true}

aus dem App Bootstrap:

var userStates = [ 
{ 
    name: 'signin', 
    url: '/signin', 
    templateUrl: 'views/signin.html', 
    data: { 
    title: 'Signin', 
    crumb: [ 
     {title: 'app.home', uiState: 'home'}, 
     {title: 'users.signin'} 
    ] 
    } 
} 
]; 

userStates.forEach(function(state){ 
    $stateProvider.state(state); 
}); 

Dann in der Komponentendefinitionsdatei:

var app = angular.module('ocs.admin.ui'); 

var ctrl = ['$state', '$scope', 'lodash', function($state, $scope, lodash) { 

    $scope.uiState = $state; 

    var crumb = lodash.get($state, 'current.data.crumb'); 
    if (state){ 
    $scope.crumb = crumb; 
    } 

}]; 

Und die HTML-Datei ist pr etty einfach im Moment:

<div class="page-breadcrumb"> 
    <div class="container"> 
     <ul class="breadcrumb"> 
      <li> 
       <a href="index.html">Home</a> 
       <i class="fa fa-circle"></i> 
      </li> 
      <li> 
       <span>Dashboard</span> 
      </li> 
     </ul> 
    </div> 
</div> 
<pre> 
    {{uiState.current | json}} 
</pre> 

Gibt es ein Ereignis, das ich oder etwas hören sollte, dass die für das Objekt wartet gebunden zu sein?

Antwort

1

du versuchen,

$scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { 
    $scope.uiState = $state; 
}); 
+0

cool. dieses Ereignis funktioniert, es ist ein bisschen klobig im Code, aber funktioniert. Prost. - Kann in 10 Minuten akzeptieren. –

Verwandte Themen