指令-下面的语法背后的原因是什么?

时间:2021-03-16 22:31:04

My question is related to directories and two of its properties.

我的问题与目录及其两个属性有关。

What is the reason that the parameters for the link function don't have a $ sign as a prefix?

链接函数的参数没有$符号作为前缀的原因是什么?

e.g

link: function (scope, element, attrs, ctrl) {
                        scope.$watch("item.quantity", function () {
                            ctrl.updateTotal();
                        });
                    }

in contrast to the controller property:

与控制器属性相反:

controller: function ($scope, $element, $attrs) {

                    }

I know that the first one is a link function and thus is written without a $ sign.

我知道第一个是link函数,因此它是不带$符号的。

But why make a difference? Is it partly because you can create your own scope in a directive and as a result the scope doesn't necessarily mean to be related with the $scope of the controller?

但为什么会有不同呢?部分原因是您可以在指令中创建自己的范围,因此范围并不一定意味着与控制器的$范围相关吗?

That would explain the scope parameter but I can't think of any explanation regarding the other ones.

这可以解释作用域参数,但我想不出其他参数的任何解释。

Thanks in advance.

提前谢谢。

2 个解决方案

#1


2  

By convention the $ prefixes are not used with functions which are not injected by the $injector. So the link: function (scope, element, attrs [,ctrl]) will not be injected. It always has the same parameters in the same order.

按照约定,$前缀不用于未被$注入器注入的函数。因此链接:函数(作用域,元素,attrs [,ctrl])将不会被注入。它总是以相同的顺序有相同的参数。

When dealing with functions where the dependency injection provides the arguments, you must use $scope, otherwise it won't be injected.

当处理依赖项注入提供参数的函数时,您必须使用$scope,否则它将不会被注入。

TL;DR

博士TL;

This is more or less to confuse Angular learners, but it is vital that you have to use positioned parameters for some functions (like postLink).

这或多或少会让有棱角的学习者感到困惑,但对于某些函数(如postLink),必须使用位置参数,这一点至关重要。

Additional info and links

额外的信息和链接

For those of you who want to know the exact details, I recommend reading following chapters of AngularJS Guide:

如果你们想知道确切的细节,我建议你们读一下AngularJS指南的以下章节:

In the latter link you can see the directive definition object containing some methods with positioned parameters (please note that in this example there are many options which don't make sense in combination):

在后一个链接中,你可以看到指令定义对象包含了一些带有位置参数的方法(请注意,在这个例子中有很多选项组合起来没有意义):

myModule.directive('directiveName', function factory(injectables) {
  var directiveDefinitionObject = {
    template: function(tElement, tAttrs) { ... },
    templateUrl: function(tElement, tAttrs) { ... },
    // controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
    compile: function compile(tElement, tAttrs, transclude) {
      return {
        pre: function preLink(scope, iElement, iAttrs, controller) { ... },
        post: function postLink(scope, iElement, iAttrs, controller) { ... }
      }
    },
    link: {
      pre: function preLink(scope, iElement, iAttrs, controller) { ... },
      post: function postLink(scope, iElement, iAttrs, controller) { ... }
    }
    // or
    link: function postLink(scope, iElement, iAttrs, controller) { ... }
  };
  return directiveDefinitionObject;
});

If you use a controller function in the DDO (abreviation for directive definition object), the arguments will be injected (hence the prefix $):

如果在DDO中使用控制器函数(对指令定义对象进行修改),则会注入参数(因此是$前缀):

// ... somewhere in the DDO ...
controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },

You can find documentation for the "special" injectables here

您可以在这里找到“特殊”注入表的文档

Sure there are more than the mentioned functions with positioned parameters, e.g. the $animate enter(), leave() etc.

当然,除了前面提到的带有位置参数的函数之外,还有其他函数,例如$animate enter()、leave()等。

#2


1  

Angular is just calling a method with these specific objects as parameters. If we wanted to (but of course it goes against convention), we could name these parameters whatever we wanted to, as long as we retained the order they were being used.

角就是用这些特定对象作为参数调用一个方法。如果我们想要(但这当然违反约定),我们可以任意命名这些参数,只要我们保留它们的使用顺序。

#1


2  

By convention the $ prefixes are not used with functions which are not injected by the $injector. So the link: function (scope, element, attrs [,ctrl]) will not be injected. It always has the same parameters in the same order.

按照约定,$前缀不用于未被$注入器注入的函数。因此链接:函数(作用域,元素,attrs [,ctrl])将不会被注入。它总是以相同的顺序有相同的参数。

When dealing with functions where the dependency injection provides the arguments, you must use $scope, otherwise it won't be injected.

当处理依赖项注入提供参数的函数时,您必须使用$scope,否则它将不会被注入。

TL;DR

博士TL;

This is more or less to confuse Angular learners, but it is vital that you have to use positioned parameters for some functions (like postLink).

这或多或少会让有棱角的学习者感到困惑,但对于某些函数(如postLink),必须使用位置参数,这一点至关重要。

Additional info and links

额外的信息和链接

For those of you who want to know the exact details, I recommend reading following chapters of AngularJS Guide:

如果你们想知道确切的细节,我建议你们读一下AngularJS指南的以下章节:

In the latter link you can see the directive definition object containing some methods with positioned parameters (please note that in this example there are many options which don't make sense in combination):

在后一个链接中,你可以看到指令定义对象包含了一些带有位置参数的方法(请注意,在这个例子中有很多选项组合起来没有意义):

myModule.directive('directiveName', function factory(injectables) {
  var directiveDefinitionObject = {
    template: function(tElement, tAttrs) { ... },
    templateUrl: function(tElement, tAttrs) { ... },
    // controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
    compile: function compile(tElement, tAttrs, transclude) {
      return {
        pre: function preLink(scope, iElement, iAttrs, controller) { ... },
        post: function postLink(scope, iElement, iAttrs, controller) { ... }
      }
    },
    link: {
      pre: function preLink(scope, iElement, iAttrs, controller) { ... },
      post: function postLink(scope, iElement, iAttrs, controller) { ... }
    }
    // or
    link: function postLink(scope, iElement, iAttrs, controller) { ... }
  };
  return directiveDefinitionObject;
});

If you use a controller function in the DDO (abreviation for directive definition object), the arguments will be injected (hence the prefix $):

如果在DDO中使用控制器函数(对指令定义对象进行修改),则会注入参数(因此是$前缀):

// ... somewhere in the DDO ...
controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },

You can find documentation for the "special" injectables here

您可以在这里找到“特殊”注入表的文档

Sure there are more than the mentioned functions with positioned parameters, e.g. the $animate enter(), leave() etc.

当然,除了前面提到的带有位置参数的函数之外,还有其他函数,例如$animate enter()、leave()等。

#2


1  

Angular is just calling a method with these specific objects as parameters. If we wanted to (but of course it goes against convention), we could name these parameters whatever we wanted to, as long as we retained the order they were being used.

角就是用这些特定对象作为参数调用一个方法。如果我们想要(但这当然违反约定),我们可以任意命名这些参数,只要我们保留它们的使用顺序。