Angular 的控制器方法如何使$scope可用于我的函数参数

How does angular's controller method make $scope available to my function argument

本文关键字：用于 我的 函数 参数 scope 控制器 方法 何使 Angular      更新时间：2023-09-26

我正在寻找伪代码答案，或者概念答案。

经过多年的编程，我从未创建一个接收函数参数的类方法，以便该方法的调用者自动访问"不可见"属性。

如果我尝试在my_app.controller(...)方法之外访问$scope，则会收到一个错误，因此我知道它不是全局的;如果我尝试从my_app.$scope或angular.$scope访问它，则会未定义。

那么我的函数参数如何访问它：

    my_app.controller('my_controller' , function( $scope , ... ) { ... }

更新（正如我所学习的那样）： 

  // javascript
  var my_class =   function( argument_A )                 
                       { this.some_prop = argument_A ;        
                         this.some_method = function( argument_B ) 
                           { console.log( argument_B ) ; // function(boo)
                           } ;
                       } ;
  var my_instance = new my_class( "my_string" ) ;
  var my_function_argument = function( boo ){ } ;
  my_instance.some_method( my_function_argument ) ;

函数是一等公民

在JavaScript和其他现代语言（Scala，Haskell，LISP等）中，函数被视为一等公民。具体来说，这意味着该语言支持将函数作为参数传递给其他函数，将它们作为其他函数的值返回，并将它们分配给变量或将它们存储在数据结构中。一些编程语言理论家也需要支持匿名函数（函数文字）。在具有一流函数的语言中，函数的名称没有任何特殊地位;它们被视为具有函数类型的普通变量。1

上面的例子可以重构为：

var myController = function ($scope, ... ) {
     console.log($scope);
     $scope.message = "Hello world"
};
my_app.controller('my_controller' , myController );

在这种情况下，.controller方法将myController对象存储在 AngularJS $controllerProvider 服务的缓存中。 cache["my_controller"] = myController;

稍后，当$compile服务遇到需要控制器的指令时：

<div ng-controller="my_controller">
    {{message}}
</div>

$compile 服务创建一个新作用域，从$controller服务缓存中检索myController函数，并使用新作用域作为函数的第一个参数调用该函数。

$compile 服务还创建一个跟踪$scope.message变量的$watch侦听函数。在每个摘要周期中，如果$scope.message发生了更改，则会相应地更新 DOM。

在问题的例子中：

//These are function invocations, the variable must be defined
console.log( boo )              ; //    ERROR: boo is not defined
my_instance.some_method( boo )  ; //    ERROR: boo is not defined

最后一个窗体使用匿名函数文本（或函数表达式）。匿名函数是作为参数传递给名为 .some_method 的方法的对象。

//The anonymous function is an object passed as an argument
//boo is a parameter to be supplied when the function is invoked
my_instance.some_method( function( boo ) { } ) ; // NO ERROR

有关函数文字的更多信息，请参阅 MDN JavaScript 参考 -- 函数表达式。

依赖关系注入和按名称连接参数

通常在 JavaScript 中，函数参数通过位置连接。在 AngularJS 框架中，函数参数是按名称注入的。这是怎么做到的？

从文档中：

推理

在 JavaScript 中，调用函数上的toString()会返回函数定义。然后可以解析定义并提取函数参数。

--

AngularJS $injector 服务 API 参考 -- 推理

所以在示例中：

my_app.controller('my_controller' , function( $scope , ... ) { ... }

$injector服务对控制器构造函数执行toString()并对其进行分析。该服务检测到$scope是函数的第一个参数，并使用该知识正确调用函数。

您可以在源代码中看到此处使用的fn.toString()。

当您创建函数并在函数参数中传递dependency名称时，angular 通过从其 DI 容器解析该依赖项来为每个依赖项创建一个对象。这种依赖注入技术称为constructor function（还有两种DI技术）。

当你使用指令在DOM上注入控制器时ng-controller函数被传递给$controllerProvider的register函数。 控制器功能称为工厂功能。这将以依赖项作为参数传递。 $injector服务从函数中获取每个依赖项，并$injector.get返回在 DI 容器中注册的任何依赖项。在返回$scope依赖项时，它会使用$rootScope.$new(isolate, parent)方法从rootScope创建新的scope。 $new方法将两个参数 1st 作为bool第二个作为参数，第二个参数作为parentScope参数。其他依赖项直接从寄存器组件取出到模块。

相关文章：