Angular - ng-Klasse basierend auf Zustand

Question

Gibt es einen bestimmten Grund, warum mein Code nicht funktioniert?

<li ng-class="{active : $state.includes('products')}"> 

Router Code:

.state('products', { 
    url: '/products', 
    templateUrl: 'app/components/views/products/products.html', 
    controller: 'productsController', 
    controllerAs: 'products' 
}) 

Answer 1

Sie vergessen die $state und $stateParams auf $rootScope setzen, wenn Sie dies tun, können Sie halten mit Ihre erste Annäherung an HTML:

Auf diese Weise müssen Sie sie nicht auf jedem einzelnen Controller injizieren. Hier

ist die Referenz: https://github.com/angular-ui/ui-router/wiki/quick-reference#note-about-using-state-within-a-template

PS: Ich persönlich nicht diese Art von globalem Ansatz empfehlen, aber es hat seine Verdienste

Answer 2

Sie erhalten die $ state-Provider über die $ Injektor in Ihrem Controller erhalten müssen (wie Sie selbst $ scope oder ein Service injizieren würde .

EDIT:

Fügen Sie es als solche:

angular.module('yourModule', []).controller('YourController',['$injector', 
    funciton($injector){} 
]); 

Dann:

$scope.$state = $injector.get('$state'); 

Sie nun Zugriff auf $ Zustand haben. Um den Namen Ihres aktuellen Zustand zu erhalten, verwenden Sie einfach:

$state.current.name 

Beispiel:

<li ng-class="{active : $state.current.name === 'products'}">