angular'控制器方法如何使$ scope可用于我的函数参数 [英] How does angular's controller method make $scope available to my function argument

问题描述

我正在寻找伪代码答案或概念性答案.

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

After programming for a number of years I have never created a class method that receives a function argument such that the caller of the method automatically gets access to 'invisible' properties.

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

If I try to access $scope outside of my my_app.controller(...) method, I get an error so I know it's not global; if I try to access it from my_app.$scope or angular.$scope I get undefined.

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

So how does my function parameter get access to it:

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

---

更新(据我所知):

---

UPDATE (as I am learning):

  // 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等)中，函数被视为一等公民.具体来说，这意味着该语言支持将函数作为参数传递给其他函数，将其作为其他函数的值返回，并将其分配给变量或存储在数据结构中.一些编程语言理论家也需要支持匿名函数(函数文字).在具有一流功能的语言中，功能名称没有任何特殊状态.它们被视为具有函数类型的普通变量. ¹

以上示例可以重构为:

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

my_app.controller('my_controller' , myController );

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

In this case the .controller method stores the myController object in the cache of the AngularJS $controllerProvider service. I.e. cache["my_controller"] = myController;

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

Later when the $compile service encounters a directive that needs a controller:

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

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

The $compile service creates a new scope, retrieves the myController function from the $controller service cache, and invokes the function with the new scope as the first argument of the function.

$ compile 服务还创建了一个 $ watch 侦听函数，该函数跟踪 $ scope.message 变量.在每个摘要周期，如果 $ scope.message 已更改，则DOM会适当更新.

The $compile service also creates a $watch listening function that tracks the $scope.message variable. On each digest cycle, if $scope.message has changed, the DOM is updated appropriately.

在问题示例中:

//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 last form uses an anonymous function literal (or function expression). The anonymous function is an object passed as an argument to the method named .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

有关函数字面量的更多信息，请参见 MDNJavaScript参考-函数表达式.

For more information on function literals, see MDN JavaScript Reference -- function expression.

通常在JavaScript中，函数参数通过位置连接连接.在AngularJS框架中，函数参数按名称注入.怎么做?

Normally in JavaScript, function arguments are connected by position. In the AngularJS framework, function arguments are injected by name. How is that done?

从文档中:

推断

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

Inference

In JavaScript calling toString() on a function returns the function definition. The definition can then be parsed and the function arguments can be extracted.

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

因此在示例中:

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

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

The $injector service does a toString() on the controller construction function and parses it. The service detects that $scope is the first argument of the function and uses that knowledge to invoke the function correctly.

您可以看到正在使用 fn.toString()

You can see fn.toString() being used here in the source code.

这篇关于angular'控制器方法如何使$ scope可用于我的函数参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！