【问题标题】:How to get value of nested constants in angularjs?如何在angularjs中获取嵌套常量的值?
【发布时间】:2017-02-16 14:42:06
【问题描述】:

我一直在尝试使用角度过滤器获取角度常量内嵌套常量的值。但是我找不到获取值的有效方法。我被允许使用 lodash "^2.4.1" 并且我尝试使用 _.pick 但我仍然只能访问根级别的常量而不能访问嵌套的常量。

//consider this
angular.module('myApp',[])

.constants('appConstants', {
    CONS1: 'root',
    CONS2: {
          NEST1: 'nested cons1',
          NEST2: 'nested cons2',
    }
)
.filter(getConstants, function  () {
    return function  (input) {
        var value =  appConstants[input];
        if (! value) {
            var keys = input.split('.');
            value =  appConstants;
            angular.forEach(keys, function(key, index) {
                value = value[key];
            });
        }
        return value;
    }
});

//where as
appConstants[CONS1]; //works
appConstants[CONS2.NEST1]; // return undefined
//in lodash
_.pick(appConstants, 'CONS2.NEST1'); // returns empty object

【问题讨论】:

    标签: javascript angularjs lodash angularjs-filter angular-constant


    【解决方案1】:

    您还可以选择使用Angular $parse function。我认为如果您将根常量对象作为上下文参数提供它,这将起作用。

    这可能看起来像:

    $parse(input)(appConstants)
    

    【讨论】:

    • 请不要批准更改代码的建议编辑。见When should I make edits to code?
    • 好的,很好,但这与我的回答无关。
    • 是的,但这是通知您的唯一方式,因此在建议的编辑审查中没有 cmets。顺便说一句,答案很好!
    • @AmyBlankenship 谢谢,这是最有效的方法。
    【解决方案2】:

    使用 AngularJS 常量

    AngularJS constant 只是它被定义为的值(这里是一个对象)。

    {
        CONS1: 'root',
        CONS2: {
              NEST1: 'nested cons1',
              NEST2: 'nested cons2',
        }
    }
    

    要获得NEST1,请使用通常的property accessors、点表示法appConstants.CONS1.NEST1 或括号表示法appConstants["CONS1"]["NEST1"]


    访问 HTML 模板中的常量

    最简单的方法就是将常量对象添加到$rootScope中。

    angular.module('myApp', [])
        .constants('appConstants', {
            CONS1: 'root',
            CONS2: {
                NEST1: 'nested cons1',
                NEST2: 'nested cons2',
            }
        })
        .run(function($rootScope, appConstants) {
            $rootScope.CONSTANTS = appConstants;
        });
    

    在任何模板中,只需使用CONSTANTS 作为对象。

    <span>{{ CONSTANTS.CONS2.NEST1 }}</span> 
    

    来源:Can I directly access module constant from HTML under AngularJS


    使用 Lodash

    如果你真的想使用 lodash,请使用_.get function,它可以让复杂路径解析到正确的嵌套对象。

    _.get(appConstants, "CONS1.NEST1");
    

    所以过滤器可以这么简单:

    .filter("const", function() {
        return function(input) {
            return _.get(appConstants, input);
        };
    });
    

    将字符串路径传递给过滤器以获取值。

    {{ "CONS2.NEST1" | const }}
    

    Lodash 的内置替代品

    Amy Blankenship presents Angular's $parse 在她的回答中,在我看来,在这种情况下,这比 Lodash 更好。


    我不能使用_.get,因为我可以使用旧版本的lodash 2.4.1

    有两种选择:

    _.get 相当复杂,但对于我们的简单案例,一个简单的字符串split 可能就可以了。

    .filter("getConstants", function() {
        return function(input) {
            var obj = appConstants,
                path = input.split('.'),
                index = 0,
                length = path.length;
    
            while (obj != null && index < length) {
                obj = obj[path[index++]];
            }
            return obj;
        };
    });
    

    【讨论】:

    • 我不能使用 _.get 因为我可以使用旧版本的 lodash 2.4.1。问题是我可以从我的视图(html)中将对象路径作为字符串传递。 {{ CONS2.NEST1 | getConstant}} {{' CONS2.NEST1' | getConstant}}
    • @BalajeeKs 我添加了与 lodash 2.4.1 相关的部分。
    • @BalajeeKs 请不要编辑其他帖子中的代码。代码按原样工作,并且已经处理了根级别的属性。见When should I make edits to code?
    • @BalajeeKs 我添加了一个更好的方法,使用 $rootScope,您可能想尝试一下。
    • @BalajeeKs 虽然我同意污染$rootScope 不是一个好主意,但我们这里的案例是使用它的原因之一。这是最有效的方法。使用 $parse 作为过滤器比使用 Lodash 好,但不比 exposing the constants in the $rootScope like most seems to agree 好。
    【解决方案3】:

    您忘记了常量声明中的右大括号 ('}')。

    也许试试这个:

    .constants('appConstants', {
        CONS1: 'root',
        CONS2: {
              NEST1: 'nested cons1',
              NEST2: 'nested cons2',
        }
    })
    

    【讨论】:

    • 对不起杰米,在这个例子中我错过了一个括号:}。我的代码里有它。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-12-09
    • 1970-01-01
    • 2016-08-22
    • 1970-01-01
    • 2017-04-01
    • 1970-01-01
    • 2021-12-14
    相关资源
    最近更新 更多