Question

在我的角度应用程序中，我有一些带有角度ng-class指令的HTML：

<button type="button" class="btn" ng-class="{true:'btn-success', false:'btn-danger'}[status.isSoftware()]">
    <span>{{status.isSoftware()}}</span>
</button>

评估结果为：

<button type="button" class="btn btn-success" ng-class="{true:'btn-success', false:'btn-danger'}[status.isSoftware()]">
    <span>false</span>
</button>

如您所见，ng-class将表达式评估为true并将.btn-success分配给我的按钮，而span将同一表达式评估为false（什么是被驱逐的行为）。我调试了函数，它总是返回false（应该这样）。

这怎么可能？我在整个应用程序中都有类似的声明，而且在其他任何地方都可以正常工作。

有人有任何想法吗？我在这里错过了什么？什么可能导致问题？

EDIT（缩减代码示例）：

angular.module("abc", [])
.factory("StatusService", [
"APP_MODEL",
    function (APP_MODEL) {

        var m_Model = {
                Software : false,
                Locked   : false
            },

            m_Status = {
                isSoftware  : function () {
                    return m_Model.Software && !m_Model.Locked;
                },
                isHardware  : function () {
                    return !m_Model.Software && !m_Model.Locked;
                },
                isLocked    : function () {
                    return m_Model.Locked;
                }
            },

            listenToServerUpdates = function () {
                //
                APP_MODEL.Software.addServerUpdateCallback(function (value) {
                    m_Model.Software = value == 1;
                });

                //
                APP_MODEL.Locked.addServerUpdateCallback(function (value) {
                    m_Model.Locked = value == 1;
                });
            };

        listenToServerUpdates();

        return {
            status : m_Status
        };
    }
])
.controller("ABCtrl", [
    "$scope",
    "StatusService",
    function ($scope, service) {
        $scope.status = service.status;
    }
]);

Answer 1

根据documentation，您应该在以下事项中使用ng-class。

而不是：

ng-class="{true:'btn-success', false:'btn-danger'}[status.isSoftware()]"

您应该使用：

ng-class="{'btn-success' : status.isSoftware(), 'btn-danger': !status.isSoftware()}"

编辑：但是，我不确定使用函数调用是否有效。因此，我建议使用属性而不是函数调用。

编辑2 ：显然它有效。感谢评论的所有意见。

ng-class计算错误的类名

1 个答案: