无法在 angularjs 中调用 Object.keys [英] Unable to call Object.keys in angularjs

问题描述

我正在使用 UI.Bootstrap 手风琴，并且我已经定义了我的标题:

I'm using a UI.Bootstrap accordion and I've defined my heading like so:

<accordion-group ng=repeat="(cname, stations) in byClient">
    <accordion-heading>
        {{ cname }} <span class="pull-right"> {{ Object.keys(stations).length }} Stations</span>
    </accordion-heading>

当显示 Object.keys(stations).length 时，它解析为空.如果我在控制器中放置相同长度的调用，我会得到预期的计数.是否存在阻止方法调用在 AngularJS 中工作的原因?

When that displays the Object.keys(stations).length resolves to nothing. If I put that same length call in my controller I get back the expected count. Is there something preventing the method call from working in AngularJS?

使用 stations 的其余手风琴按预期工作，所以我知道它被正确填充.byClient 数据结构基本上是这样的:

The rest of the accordion that uses stations acts as expected, so I know that it's being populated properly. The byClient data structure basically looks like so:

{
    "Client Name" : {
        "Station Name": [
            {...},
            {...}
        ]
    }
 }

推荐答案

是的，那是因为 Object 是 window/global 的一部分，而 angular 无法计算该表达式反对范围.当您在绑定中指定 Object.keys 时，angular 会尝试根据 $scope 对其进行评估，但找不到它.您可以将 object.keys 的引用存储在 rootScope 中的某个实用程序中，并在应用程序的任何地方使用它.

Yes, That is because Object is a part of window/global and angular cannot evaluate that expression against the scope. When you specify Object.keys in your binding angular tries to evaluate it against the $scope and it does not find it. You could store the reference of object.keys in some utility in rootScope and use it anywhere in the app.

像这样:-

angular.module('yourApp',[deps...]).run(function($rootScope){
  //Just add a reference to some utility methods in rootscope.
  $rootScope.Utils = {
     keys : Object.keys
  }

  //If you want utility method to be accessed in the isolated Scope 
  //then you would add the method directly to the prototype of rootScope 
  //constructor as shown below in a rough implementation.

  //$rootScope.constructor.prototype.getKeys = Object.keys;

});

并将其用作:-

<span class="pull-right"> {{ Utils.keys(stations).length }} Stations</span>

这将适用于除独立作用域之外的任何子作用域.如果您打算在隔离范围内执行此操作(例如:- 隔离范围指令)，则需要在范围上添加 Object.keys 的引用，或者在范围上公开方法时这将返回长度.

Well this will be available to any child scopes except for isolated scopes. If you are planning to do it on the isolated scope (eg:- Isolated scoped directives) you would need to add the reference of Object.keys on the scope, or as you expose a method on the scope which will return the length.

或者更好的是，创建一个格式过滤器来返回密钥长度并在任何地方使用它.

Or better yet , create a format filter to return the keylength and use it everywhere.

app.filter('keylength', function(){
  return function(input){
    if(!angular.isObject(input)){
      throw Error("Usage of non-objects with keylength filter!!")
    }
    return Object.keys(input).length;
  }
});

然后做:-

{{ stations | keylength }}

演示

这篇关于无法在 angularjs 中调用 Object.keys的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！