如何与 ng-switch 中的全局变量进行比较答案

【问题标题】：How to compare against global variables in ng-switch如何与 ng-switch 中的全局变量进行比较
【发布时间】：2013-09-06 19:56:03
【问题描述】：

我正在使用 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-switch 块中使用相同的值进行比较时，它永远不会评估为真。 This JSFiddle 展示了我尝试使其正常工作。我还尝试将常量值显式引用为$rootScope 的成员和表达式（在双花括号内），但没有任何效果。

任何想法我做错了什么？

谢谢，

提姆

【问题讨论】：

看起来不像 ng-switch 指令那样工作。其他人也制作了类似的 cmets。这是我发现的另一个突出问题的 jsfiddle：jsfiddle.net/sfqGB
目前看来您还不能拥有动态ng-switch-when。或者，您可以使用ngIf。

标签： javascript angularjs ng-switch rootscope

【解决方案1】：

您可以自定义ng-switch-on表达式，而不是尝试设置ng-switch-when，以便在myConstant等于item.value时产生特定值：

<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>

Working example.

【讨论】：

这是一种有趣的方法，它确实使我的原始示例工作，但这不只是创建“if”条件的另一种方式吗？我真正的目标是使用 ng-switch 在多个不同的常量值之间切换。是否可以调整您的语法以支持它？
我可能会运行 switch on 函数，它的作用与表达式相同。查看带有多个常量的修改示例jsfiddle.net/MmCUr/11。
我想知道为什么这不起作用，至少在最新的稳定 Angular 版本 1.2.2 中是这样。通过查看 angular 源代码，我看到以下内容： ng-if 监视在其链接函数中注入的范围。 ng-switch 监视在其链接函数中注入的作用域。因此，在 $rootScope 可用于所有其他派生范围的情况下，两者都应在同一上下文中解析它们的表达式变量。

【解决方案2】：

你总是可以自己动手... :)

（不确定它的效率如何，而且我刚刚写的还没有经过充分测试）

http://jsfiddle.net/H45zJ/1/

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;');
            });
        }
    };   
});

【讨论】：