javascript - Angular.js和ng-switch-when-模拟枚举

为了实现某种类型的安全性，我想向 Controller 逻辑中引入一些枚举，因此，例如，我创建了以下内容:

var app = angular.module('myApp', []);
var StateEnum = Object.freeze({"login":1, "logout":2})
function LoginCheckCtrl($scope) {
    $scope.stateEnum = StateEnum
    $scope.loginData = StateEnum.login
    $scope.login = function() {
        console.log($scope.loginData  ? 'logged in' : 'not logged in');
        $scope.loginData = StateEnum.logout;
    };
    $scope.logout = function() {
        console.log($scope.loginData ? 'logged in' : 'not logged in');
        $scope.loginData = StateEnum.login;
    };
}

在我的示例页面中，我将有以下内容:

<div ng-controller="LoginCheckCtrl">
   <div ng-switch on="loginData">
      <div ng-switch-when="stateEnum.login" ng-include="'login'"></div>
      <div ng-switch-when="stateEnum.logout" ng-include="'logout'"></div>
   </div>
</div>

<script type="text/ng-template" id="login">
    <button ng-click="login()">Login</button>
</script>

<script type="text/ng-template" id="logout">
    <button ng-click="logout()">Logout</button>
</script>

但ng-switch-when不想工作。仅当我用整数(例如1,2)手动替换ng-swith-when中的值时，它才有效。

这里有一些小玩意来证明这一点:

http://jsfiddle.net/jNxyE/3/

http://jsfiddle.net/4Jg7M/2/

如您所见，现在第一个显然不起作用，而第二个明显起作用-这意味着单击按钮时它会更改按钮。

我认为的问题是var StateEnum = Object.freeze({"login":1, "logout":2})。

可以在我的html中使用我的枚举，以便ng-switch-when正常工作(如第二 fiddle 所示)吗？

最佳答案

我想我将创建一个可以包含您所有枚举的服务:

angular.module('Enums', []).
   factory('Enum', [ function () {

      var service = {
        freeze: {login:1, logout:2 },
          somethingelse: {abc:1,def:2}
      };

     return service;

    }]);

您的应用定义如下所示:

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

然后，您的 Controller 可以在需要时注入(inject)它们:

function LoginCheckCtrl($scope, Enum) {
    if (1==Enum.freeze.login) // as an example
    if (1==Enum.somethingelse.abc)  // another example

服务是单例，因此这将有效地为您提供一组您可以定义的枚举。

至于ngSwitch when指令，我相信它需要一个字符串(如果我输入错误，请更正我)。一些引用:

https://groups.google.com/forum/?fromgroups#!topic/angular/EH4W0y93ZAA
https://github.com/angular/angular.js/blob/master/src/ng/directive/ngSwitch.js#L171

实现所需目标的另一种方法是使用ng-show/ng-hide

<div ng-include="'login'" ng-show='stateEnum.login==loginData' ...>