Angular.js和NG-动开关 - 当 - 模拟枚举 [英] Angular.js and ng-swith-when - emulating enum

问题描述

我想介绍一些枚举到我的控制器逻辑某种类型的安全性，因此，例如我创造了这样的事情：

I wanted to introduce some enum to my controller logic for some type safety, so for example I created something like this:

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

和在我的示例页面我有这样的事情：

and in my example page I would have something like this:

<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-开关时不想工作。它只能如果我的替代值 NG-动开关，当手动整数，例如1,2。

but ng-switch-when does not want to work. It only works if I substitute values in ng-swith-when manually with integers, for example 1,2.

下面是小提琴证明这一点：

Here are fiddles to demonstrate this:

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

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

现在，你可以看到，第一个显然是不行的，而第二个作品 - 也就是说单击按钮时，它改变了按钮

now, as you can see, the first one clearly does not work, and second one works - meaning it changes button when button is clicked.

我觉得这个问题是这样的 VAR StateEnum = Object.freeze（{登录：1，注销：2}）。

The problem I think is this var StateEnum = Object.freeze({"login":1, "logout":2}).

时，可以使用我的枚举在我的HTML，所以 NG-开关时将正常工作（如第二小提琴）？

Is is possible to use my enum in my html so ng-switch-when will work properly (as in second fiddle)?

推荐答案

我想我会创建一个能够把所有的枚举服务：

I think I would create a service that could have all your enums:

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

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

     return service;

    }]);

您的应用程序的定义是这样的：

Your app definition would be like this:

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

然后，当你需要的时候你的控制器，你可以把他们注入：

Then your controllers you could inject them when you need them:

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

服务是单身所以这将有效地给你一组，你可以定义枚举。

Services are singletons so this effectively will give you a set of enums you could define.

对于ngSwitch指令的时候，我相信它需要一个字符串（请纠正我，如果我错了）。一对夫妇引用：

As for the ngSwitch when directive, I believe it requires a string (please correct me if I'm wrong). A couple references:

<一个href=\"https://groups.google.com/forum/?fromgroups#!topic/angular/EH4W0y93ZAA\">https://groups.google.com/forum/?fromgroups#!topic/angular/EH4W0y93ZAA
<一href=\"https://github.com/angular/angular.js/blob/master/src/ng/directive/ngSwitch.js#L171\">https://github.com/angular/angular.js/blob/master/src/ng/directive/ngSwitch.js#L171

这是另一种方法，以达到你想要是使用 NG-节目 / NG-隐藏

An alternate way to achieve what you want would be to use ng-show/ng-hide

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

这篇关于Angular.js和NG-动开关 - 当 - 模拟枚举的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！