Question

我想根据我在服务中设置的布尔值设置一个类。这是我的代码中的简化版（为了便于阅读）。布尔值通常由此服务中的许多其他函数设置。

HTML：

set Bundle display

服务：

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

控制器：

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

Answer 1

尝试这种方式：

sc

HTML：

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

View无法直接访问服务。 View可以访问<div ng-class="{ 'green' : isGreen }">对象，因此，如果您需要查看某些内容，则应首先在$scope中写入。

如果您想跟踪颜色：

$scope

和

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

Answer 2

视图只能访问$scope的属性。因此，当您在视图中说MainController.CustomService.isGreen时，Angular会尝试访问不存在的$scope.MainController.CustomService.isGreen。您应该将服务发布到控制器中的作用域。

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

然后您可以从以下视图访问您的服务：

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

另一种稍微不同，更流行的方法是指示控制器在范围内发布自己。您可以通过将ng-controller值调整为MainController as $ctrl来实现此目的（名称可以是Angular 1.5标准化的$ ctrl）。然后，$ctrl在您的视图中可用：

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

在控制器功能中，$ctrl对应this，因此要发布服务，您可以这样做：

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

请注意，您现在不需要将$scope作为参数注入。

如何在angular.js中使用带有布尔值的ng-class？

2 个答案: