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

问题描述

这个标题满嘴！我有一些由另一位休假的开发人员编写的代码，无法解释自己.留在办公室的我们中没有人能弄清楚它为什么起作用.任何帮助将不胜感激！

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

$scope.required = function(pathString, object){/*pathString 是指向对象中属性的字符串表示对象是为所描述的属性返回真/假在路径字符串和对象的状态中.*/}

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

</normal-directive>

奇怪的指令在他们的声明中并不引人注目.它的定义与普通指令相同.

directive('weirdDirective', function(){返回 {限制:'E'，范围: {required: '&isrequired'},templateUrl: '路径/到/模板'}});

奇怪的是在实现中.出现了这两个新变量 fieldpath 和 item，而不是普通指令中传递给函数的字符串和对象.

</weird-directive>

变量 fieldpath 和 item 没有出现在控制器或奇怪的指令声明中的任何地方.然而，它们出现在奇怪的指令模板中，如下所示.

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

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

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

解决方案

我认为对 required 的调用是在父作用域中执行的"

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

<块引用>

"所以我不明白它是如何使用似乎是在模板中赋值"

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

让我们检查 DDO.

return {限制:'E'，范围: {required: '&isrequired'},templateUrl: '路径/到/模板'}

以及父作用域中的函数:

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

& 符号表示传递对函数的引用，正如您提到的，该函数在父作用域中被评估，但是文档解释说，如果该方法需要一些参数，则必须传递与函数的名称这些参数:

</weird-directive>

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

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

在你的情况下:

</normal-directive>

最后但并非最不重要的是，函数的评估仅在参数评估之后发生.

希望这会有所帮助.

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.
  */
}

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

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>

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>

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!

解决方案

"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.

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>

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.

in your case:

<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.

hope this helps.

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