javascript - 如何在 angularjs 中将 ng-class 与服务中的 bool 值一起使用？

Question

我想根据我在服务中设置的 bool 值设置一个类。这是我的代码的简化版本(为了便于阅读)。该 bool 值通常由该服务中的许多其他函数设置。

HTML:

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

服务:

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

Controller :

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

}]);

Answer 1

试试这个方法:

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

HTML:

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

View 不能直接访问服务。 View 可以访问$scope对象，所以如果你需要 View 中的东西，你应该先写在$scope中。

如果你想跟踪颜色:

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

和:

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