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

时间:2013-09-03 14:20:21

标签: javascript angularjs ng-switch rootscope

我正在使用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块中使用相同的值进行比较时,它永远不会计算为true。 This JSFiddle证明了我尝试让它发挥作用。我也尝试显式引用常量值作为$rootScope的成员和作为表达式(在双花括号内)但没有任何作用。

任何想法我做错了什么?

谢谢,

2 个答案:

答案 0 :(得分:5)

您可以自定义ng-switch-when表达式,以便在ng-switch-on等于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

答案 1 :(得分:1)

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

(不确定这是多么有效,而且我刚刚写完它并没有经过充分测试)

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