我正在使用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
的成员和作为表达式(在双花括号内)但没有任何作用。
任何想法我做错了什么?
谢谢,
添
答案 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>
答案 1 :(得分: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;');
});
}
};
});