Wie benutzt man ng-class mit einem boolean von einem Service in angular.js?

Question

Ich möchte eine Klasse basierend auf dem Booleschen Wert festlegen, den ich in einem Dienst festgelegt habe. Dies ist eine vereinfachte Version von meinem Code (aus Gründen der Lesbarkeit). Der Boolesche Wert wird normalerweise von vielen anderen Funktionen in diesem Dienst festgelegt.

HTML:

<div ng-controller="MainController"> 
    <div ng-class="{ 'green' : MainController.CustomService.isGreen }"> 
    </div> 
</div> 

Service:

App.service("CustomService", function() { 
    this.isGreen = true; 
}) 

Controller:

App.controller('MainController', ['$scope', 'CustomService', function($scope, CustomService) { 

}]); 

Answer 1

Versuchen Sie, diese Art und Weise:

App.controller('MainController', ['$scope', 'CustomService', function($scope, CustomService) { 
    $scope.isGreen = CustomService.isGreen; 
}]); 

HTML:

<div ng-class="{ 'green' : isGreen }"> 

Ansicht hat keinen direkten Zugriff auf Service. View hat Zugriff auf $scope Objekt, also, wenn Sie etwas in Sicht benötigen, sollten Sie in $scope zuerst schreiben.

Wenn Sie Farbe verfolgen möchten:

App.controller('MainController', ['$scope', 'CustomService', function($scope, CustomService) { 
    $scope.isGreen = function() { 
     return CustomService.isGreen; 
    }; 
}]); 

Und:

<div ng-class="{ 'green' : isGreen() }"> 

Answer 2

Nur Eigenschaften von $scope sind der Ansicht zugänglich. Wenn Sie also in der Ansicht MainController.CustomService.isGreen sagen, versucht Angular, auf $scope.MainController.CustomService.isGreen zuzugreifen, was nicht existiert. Sie sollten den Dienst in dem Bereich in Ihrem Controller veröffentlichen.

App.controller('MainController', ['$scope', 'CustomService', function($scope, CustomService) { 
    $scope.CustomService = CustomService; 
}]); 

Dann können Sie Ihren Dienst aus der Sicht wie folgt zugreifen:

<div ng-class="{ 'green' : CustomService.isGreen }"> 
</div> 

Eine andere etwas anders, populärer Ansatz ist, die Steuerung zu veröffentlichen sich in den Rahmen zu unterweisen. Sie tun dies, indem Sie den Wert ng-controller auf MainController as $ctrl (der Name könnte alles andere als Angular 1.5 standardisierte $ ctrl sein). Dann $ctrl in Ihrer Ansicht verfügbar wird:

<div ng-class="{ 'green' : $ctrl.CustomService.isGreen }"> 
</div> 

In der Reglerfunktion, $ctrl zu this entspricht, so um den Dienst zu veröffentlichen, würden Sie tun:

App.controller('MainController', ['CustomService', function(CustomService) { 
     this.CustomService = CustomService; 
}]); 

Hinweis Sie brauchen nicht zu injizieren $scope als Parameter jetzt.