如何从一个指令模板访问Object.keys（对象）。长度？ [英] How do I access Object.keys(object).length from a directive template?

问题描述

我试图创造一个指令，将列出包含在一个错误的对象（ {电话：是必需的] }中的所有错误，但<强>仅当对象非空。（它没有意义说下面的错误......当时有没有。）

我想通了如何检查对象是否通过测试 Object.keys（错误）空。长度。 的问题是，我无法弄清楚如何从我的指令模板访问Object.keys。这可能吗？

由于角前pressions被评估（使用 $解析，而不是的eval（））在范围的情况下，而不是窗口的背景下，我们没有访问之类的东西对象从指令模板，因为对象不是范围的属性。 （文档：防爆pressions 的）

有道理至今。它接着说，不像JavaScript中，这里的名字默认为全球窗口性质，角前pressions必须使用 $窗口明确提及全球窗口对象。例如，如果你要调用警报（）在离pression您必须使用 $ window.alert（）。

但我似乎无法访问对象就算我做的 $ window.Object 。我缺少什么？

---

这里的code为我调试指令（在这里是一个的jsfiddle ）：

app.js.coffee：

...
.directivedisplayErrorsAllKeys'， - ＆GT;
  {
    限制：'A'，
    范围： {
      错误：'='
      调试：@debug
    }
    templateUrl：'模板/显示 - 错误 - 全键
  }.RUN（['$ rootScope'，（$ rootScope） - GT;
  $ rootScope.nonEmpty =（对象） - ＆GT;
    ！ Object.keys（对象）。长度
]）.controller（'TestDisplayErrorsAllKeys'，
['$范围'，
（$范围） - GT;  $ scope.other_errors = {}  $ scope.add_errors = - ＆GT;
    $ scope.other_errors = {姓：需要]，手机：需要]}  $ scope.clear_errors = - ＆GT;
    $ scope.other_errors = {}
]）


显示 - 错误 - 全keys.ngt.haml：

.errors（NG-秀=$ window.Object.keys（错误）。长度大于0）
  ％P以下错误prevented这从节约：
  DIV％（NG-重复=（键，error_messages）中的错误）{{键}}：{{error_messages | toSentence}}


test_ng_display - 错误 - 全keys.html.haml

：SCSS
  .errors {
    颜色：红色;
  }DIV％（NG-应用='MyApp的'）
  ％形式（NG-控制器=TestDisplayErrorsAllKeys）
    ％对错误：{{other_errors}}
    ％P非空（other_errors）：{{非空（other_errors）}}
    ％HR /    ％DIV（显示-错误 - 全键错误=other_errors）    ％输入（类型=按钮值=添加错误NG点击=add_errors（））/
    ％输入（类型=按钮值=清除错误NG点击=clear_errors（））/


我终于得到它在我的范围界定一个辅助方法并调用代替（ $ root.nonEmpty（错误））（见的jsfiddle 的工作演示）。

这是一个可能的 pretty 的很好的解决方案，但是：

1. 是否有更好的方法来解决这个？你将如何做它（写在 NG-节目前pression）？




2. 我怎么才能用它来工作， Object.keys（错误）。长度直接在 NG-节目 ??

解决方案

我将提供在指令范围内的辅助功能（这是孤立的）。通常由指令提供链接功能：

  .directive（'displayErrorsAllKeys'，函数（）{
    返回{
        限制：'A'，
        范围： {
            错误：'='，
            调试：@debug
        }，
        链接：功能（范围）{
            scope.errorsExists =功能（对象）{
                返回的对象和放大器;＆安培; Object.keys（对象）。长度;
            };
        }，
        templateUrl：'模板/显示 - 错误 - 全键
    };
}）
 

在根范围内配售逻辑和数据很少是一个很好的做法。另外请注意，我命名的函数errorExists，其在错误的实际再presentation提供索姆抽象。

至于你的第二个问题，你可以添加 scope.Object =对象; 在您的链接的功能，但是的不的此类专用！逻辑并不在模板的归属。模板应与羯羊或不必担心显示错误，但不是的为什么的

I'm trying to create a directive that will list all the errors contained in an errors object ({phone: ["is required"]}, but only if the object is non-empty. (It doesn't make sense to say "The following errors…" when there were none.)

I figured out how to check if an object is empty by testing Object.keys(errors).length. The problem is that I can't figure out how to access Object.keys from my directive template. Is this possible?

Since Angular expressions are "evaluated" (using $parse, not eval() ) in the context of a scope instead of in the context of window, we don't have access to things like Object from the directives template, because Object isn't a property of the scope. (Docs: Expressions)

Makes sense so far. It goes on to say that "Unlike JavaScript, where names default to global window properties, Angular expressions must use $window explicitly to refer to the global window object. For example, if you want to call alert() in an expression you must use $window.alert().

But I can't seem to access Object even if I do $window.Object. What am I missing?

---

Here's the code for the directive I'm debugging (and here's a jsfiddle):

app.js.coffee:

…
.directive 'displayErrorsAllKeys', ->
  {
    restrict: 'A',
    scope: {
      errors: '='
      debug: '@debug'
    }
    templateUrl: 'templates/display-errors-all-keys'
  }

.run(['$rootScope', ($rootScope) ->
  $rootScope.nonEmpty = (object) ->
    !! Object.keys(object).length
])

.controller('TestDisplayErrorsAllKeys',
['$scope',
( $scope ) ->

  $scope.other_errors = {}

  $scope.add_errors = ->
    $scope.other_errors = {"surname":["is required"],"phone":["is required"]}

  $scope.clear_errors = ->
    $scope.other_errors = {}
])

display-errors-all-keys.ngt.haml:

.errors(ng-show="$window.Object.keys(errors).length > 0")
  %p The following errors prevented this from saving:
  %div(ng-repeat="(key, error_messages) in errors") {{key}}: {{error_messages | toSentence}}

test_ng_display-errors-all-keys.html.haml

:scss
  .errors {
    color: red;
  }

%div(ng-app='MyApp')
  %form(ng-controller="TestDisplayErrorsAllKeys")
    %p errors: {{ other_errors }}
    %p nonEmpty(other_errors): {{ nonEmpty(other_errors) }}
    %hr/

    %div(display-errors-all-keys errors="other_errors")

    %input(type="button" value="Add errors" ng-click="add_errors()")/
    %input(type="button" value="Clear errors" ng-click="clear_errors()")/

I finally got it to work by defining a helper method in my scope and calling that instead ($root.nonEmpty(errors)) (see jsfiddle for working demo).

This is probably a pretty good solution, but:

1. Is there an even better way to solve this? How would you have done it (written the ng-show expression)?

2. How would I get it to work using Object.keys(errors).length directly in the ng-show??

解决方案

I would provide the helper function in the directives scope (which is isolated). Typically by providing a link function for the directive:

.directive('displayErrorsAllKeys', function() {
    return {
        restrict: 'A',
        scope: {
            errors: '=',
            debug: '@debug'
        },
        link: function (scope) {
            scope.errorsExists = function(object) {
                return object && Object.keys(object).length;
            };
        },
        templateUrl: 'templates/display-errors-all-keys'
    };
})

Placing logic and data in the root scope is seldom a good practice. Also note that I named the function errorExists, which provides som abstraction upon the actual representation of the errors.

As for your second question, you could add scope.Object = Object; in your link function, but DON'T! Such specific logic doesn't belong in your template. The template should be concerned with wether or not to show the errors, but not why.

这篇关于如何从一个指令模板访问Object.keys（对象）。长度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！