Javascript 如何与ng switch中的全局变量进行比较

我正在使用AngularJS

$rootScope

对象公开一些控制器和视图都需要访问的全局常量：

var app = angular.module('myApp', []);

app.run(function ($rootScope) {
    $rootScope.myConstant = 2;
});

当我尝试在视图中渲染全局值时，它会正常工作：

{{myConstant}}

同样，如果我在

ng if

条件中引用全局值，它也会起作用：

<span ng-if="someValue == myConstant">Conditional content</span>.

条件内容。

但是，当尝试在

ng开关

块内使用相同的值进行比较时，它的计算结果永远不会为true。演示了我如何使其工作。我还尝试将常量值显式引用为

$rootScope

的成员和表达式（在双大括号内），但没有任何效果

知道我做错了什么吗

谢谢

---

Tim

当时，您可以自定义

ng开关打开

表达式，以在

myConstant

等于

项时生成特定值。值

：

<span ng-switch on="{true:'const', false: item.value}[myConstant == item.value]">
    <span ng-switch-when="const">
        <span class="blue">{{item.name}}</span> (emphasis applied by ng-switch) 
    </span>
    <span ng-switch-when="4">
        <span class="red">{{item.name}}</span> (emphasis applied by ng-switch) 
    </span>
    <span ng-switch-default>
        {{item.name}}
    </span>
</span>

{{item.name}}（由ng开关应用强调）
{{item.name}}（由ng开关应用强调）
{{item.name}

---

.

您可以随时滚动您自己的…：）

（不确定这有多高效，而且没有像我刚才写的那样经过很好的测试）

app.directive（'wljSwitch'，function（）{
返回{
控制器：功能（$scope）{
var_值；
this.getValue=函数（）{
返回_值；
};
this.setValue=函数（值）{
_价值=价值；
};
var _whenCount=0；
this.addWhen=函数（值）{
_WhenCount++；
}
this.removeWhen=函数（值）{
_当计数--；
}
this.hasWhens=函数（）{
当计数<-1时返回_；
};
},
链接：功能（范围、元素、属性、控制器）{
范围：$watch（函数（）{
返回范围$eval（attrs.wljSwitchOn）；
}，函数（值）{
控制器。设置值（值）；
});
}
};   
});
app.directive（'wljSwitchWhen'，function（）{
返回{
要求：“^wljSwitch”，
模板：“”，
是的，
替换：正确，
链接：功能（范围、元素、属性、控制器）{
范围：$watch（函数（）{
返回controller.getValue（）==范围$eval（attrs.wljSwitchWhen）；
}，函数（值）{
如果（值）{
controller.addWhen（）；
}否则{
controller.removeWhen（）；
}
元素属性（'style'，value？''：'display:none；'）；
});
}
};   
});
app.directive（'wljSwitchDefault'，function（）{
返回{
要求：“^wljSwitch”，
模板：“”，
是的，
替换：正确，
链接：功能（范围、元素、属性、控制器）{
范围$watch（controller.hasweens，函数（值）{
元素属性（'style'，value？''：'display:none；'）；
});
}
};   
});

与ng switch指令的工作原理不同。其他人也发表了类似的评论。这里是我发现的另一个JSFIDLE，它突出了这个问题：现在看来，当时，您不可能有一个动态的

ng开关。或者，您可以使用
ngIf
。这是一种有趣的方法，它当然可以让我的原始示例正常工作，但这不是创建“if”条件的另一种方式吗？我真正的目标是使用ng开关在多个不同的常量值之间切换。是否可以调整您的语法以支持该功能？我可能会运行switch-on函数，该函数将执行与expression相同的工作。查看修改后的多常数示例。我想知道为什么这不起作用，至少在最新的稳定角度版本1.2.2中是这样。通过查看angular源代码，我看到了以下内容：ng if观察在其链接函数中注入的作用域。ng开关在其链接功能中观察注入的示波器。因此，在这种情况下，$rootScope可用于所有其他派生范围，这两个派生范围都应该在相同的上下文中解析它们的表达式变量。
app.directive('wljSwitch', function () {
    return {
        controller: function ($scope) {
            var _value;
            this.getValue = function () {
                return _value;
            };
            this.setValue = function (value) {
                _value = value;
            };

            var _whensCount = 0;
            this.addWhen = function (value) {
                _whensCount++;
            }
            this.removeWhen = function (value) {
                _whensCount--;
            }
            this.hasWhens = function () {
                return _whensCount < -1;
            };
        },
        link: function (scope, element, attrs, controller) {
            scope.$watch(function () {
                return scope.$eval(attrs.wljSwitchOn);
            }, function (value) {
                controller.setValue(value);
            });
        }
    };   
});

app.directive('wljSwitchWhen', function () {
    return {
        require: '^wljSwitch',
        template: '<span ng-transclude></span>',
        transclude: true,
        replace: true,
        link: function (scope, element, attrs, controller) {
            scope.$watch(function () {
                return controller.getValue() === scope.$eval(attrs.wljSwitchWhen);
            }, function (value) {
                if (value) {
                    controller.addWhen();           
                } else { 
                    controller.removeWhen();      
                }
                element.attr('style', value ? '' : 'display:none;');
            });
        }
    };   
});

app.directive('wljSwitchDefault', function () {
    return {
        require: '^wljSwitch',
        template: '<span ng-transclude></span>',
        transclude: true,
        replace: true,
        link: function (scope, element, attrs, controller) {
            scope.$watch(controller.hasWhens, function (value) {
                element.attr('style', value ? '' : 'display:none;');
            });
        }
    };   
});