data-ng-class-Bedingungen funktioniert nicht beim manuellen Ändern der URL

Question

Ich habe eine bedingte Anweisung für das div on data-ng-Klasse und ich möchte irgendwie diesen Bereich zum Controller hinzufügen und angeben, wenn die URL/vegetarisch ist Wenden Sie Klasse 'Ei' an und ich ändere url manuell Ich möchte die Klasse 'Speck' angewendet werden, aber es funktioniert nicht, wo ich habe ich falsch gemacht?

html:

<div data-ng-class="{'egg': isVeggie, 'bacon': !isVeggie }"> 
    Text here 
</div> 

Controller:

app.controller('foodCtrl', function ($scope, $location) { 

    $scope.location = $location; 
    $scope.isVeggie = false; 


    $scope.isVeggie = function() { 
    if(isVeggie === $location.path('/vegetarian')) { 
     return true; 
    } 
    } 

}); 

dies nicht funktioniert. Wenn ich/vegetarisch tippe, wird das Klassenei angewendet, aber wenn ich die URL zu etwas anderem wie/Frühstück ändere, bleibt die Klasse "Ei". Wie kann ich das schaffen? Danke

Answer 1

Warum die Eigenschaft und die Funktion mit dem gleichen Namen? Schließlich haben Sie nur die Funktion

$scope.isVeggie = false; 

$scope.isVeggie = function() { 
    if(isVeggie === $location.path('/vegetarian')) { 
     return true; 
    } 
} 

Ändern Sie den Code nur die Funktion zu haben.

Nur

$scope.isVeggie = function() { 
     if(isVeggie === $location.path('/vegetarian')) { 
      return true; 
     } 
    } 

und Markup

<div data-ng-class="{'egg': isVeggie(), 'bacon': !isVeggie() }"> 
    Text here 
</div> 

Answer 2

Sie binden Sie ng-Klasse-Richtlinie auf die Eigenschaft isVeggie und nicht die Funktion isVeggie().

Ihre HTML ändern:

<div data-ng-class="{'egg': isVeggie(), 'bacon': !isVeggie() }"> 
    Text here 
</div> 

Sie können dann die folgende Zeile in Ihrem Controller entfernen:

$scope.isVeggie = false;