Javascript对象作为Angular指令属性中的函数参数 [英] Javascript objects as function arguments in Angular directive properties

问题描述

那个标题真是令人！目结舌！我有一些其他开发人员编写的代码正在休假中，无法解释自己.我们办公室里没人能弄清楚它为什么起作用.任何帮助将不胜感激！

That title is a mouth-full! I've got some code written by another developer that's on leave and is unavailable to explain himself. None of us left in the office can figure out why it works. Any help would be appreciated!

我们有许多指令，这些指令使用控制器中定义的函数的结果作为属性之一.控制器上的方法看起来像这样.

We have a number of directives that use the results of a function defined in the controller as one of the properties. The method on the controller looks something like this.

$scope.required = function(pathString, object){
  /*
    pathString is a string representation pointing to a property in object
    object is 
    Returns true/false for the property described 
    in the path string and the state of the object.
  */
}

通常，当我们将其用作html文件中指令实现的属性值时，它看起来像这样.

Usually, when we use that as a property value for a directive implementation in an html file it looks like this.

<normal-directive
  isrequired='required("Path.to.property", object)'></normal-directive>

奇怪的指令在它们的声明中没有什么变化.它的定义与普通指令相同.

The weird directive is unremarkable in their declaration. It's definition is identical to the normal directives.

directive('weirdDirective', function(){
  return {
    restrict: 'E',
    scope: {
      required: '&isrequired'
    },
    templateUrl: 'path/to/template'
  }
});

怪异之处在于实现.这两个新的变量fieldpath和item代替了普通指令中传递给函数的字符串和对象.

The weirdness is in the implementation. Instead of the string and object passed to the function in the normal directives, these two new variable fieldpath and item appear.

<weird-directive
 isrequired='required(fieldpath, item)'></weird-directive>

变量fieldpath和item不会出现在控制器或怪异的指令声明中的任何位置.但是，它们存在于奇怪的指令模板中，如下所示.

The variables fieldpath and item do not appear anywhere in the controller or the weird directive declaration. They are, however, present in the weird directive template, shown below.

<div class='weird-directive'>
 <normal-directive
   isrequired='required({fieldpath:'Path.to.property', item: object})'></normal-directive>
</div>

这给我提出了各种各样的问题.我以为对require的调用是在父范围内执行的，所以我不明白它是如何使用在模板中似乎已被赋值的变量的.此外，对象通常作为单个参数传递，但它们似乎在此处已拆分为提供所需的两个参数.

This raises ALL KINDS of questions for me. I thought the call to required was executed in the parent scope, so I don't understand how it's using variables that appear to be assigned a value in the template. Furthermore, objects are usually passed as a single argument, but they appear to have been split out here to provide the required two arguments.

我非常想了解这是如何工作的，因此，非常感谢您的帮助或解释！

I would very much like to understand how this works, so any help or explanation would be most appreciated!

推荐答案

我认为对required的调用是在父范围内执行的"

"I thought the call to required was executed in the parent scope"

正确，该函数在父作用域中求值.

correct, the function is evaluated in the parent scope.

"，所以我不明白它是如何使用似乎是 在模板中分配了一个值"

"so I don't understand how it's using variables that appear to be assigned a value in the template"

不完全是，发生的情况略有不同.

Not exactly, what happening is slightly different.

让我们检查一下DDO.

Let's examine the DDO.

return {
    restrict: 'E',
    scope: {
      required: '&isrequired'
    },
    templateUrl: 'path/to/template'
  }

以及父作用域中的函数:

and the function in the parent scope:

$scope.required = function(pathString, object){

}

&符号表示传递对函数的引用，正如您提到的那样，该函数在父范围中进行了赋值，但是文档说明，如果该方法需要一些参数，则必须将函数的名称与这些参数:

the & symbol means passing a reference to a function that, as you mentioned, is evalueted in the parent scope, however the documentation explain that if the method requires some parameters, you must pass along with the function the name of these parameters:

<weird-directive
 isrequired='required(fieldpath, item)'></weird-directive>

我知道语法可能有点误导，但是这里我们不调用该函数，我们指定fieldpath和item是将在调用阶段稍后使用的键.

I understand that the syntax could be a little misleading, but here we're not invoking the function, we are specifying that fieldpath and item are keys that will be used later during the invocation phase.

现在，在子作用域内，您可以调用传递作为参数的映射的函数，其中每个键代表一个参数名称，而对应的值本身就是值.

Now inside your child scope, you can invoke the function passing as an argument a map, where each key represent a parameter name, and the correspondent value the value itself.

在您的情况下:

<normal-directive
   isrequired='required({fieldpath:'Path.to.property', item: object})'></normal-directive>

最后但并非最不重要的一点是，函数的评估仅在参数评估之后进行.

last but not least, the evaluation of the function happens only after the evaluation of the parameters.

希望这会有所帮助.

这篇关于Javascript对象作为Angular指令属性中的函数参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！