如何有效角的控制器方法化妆$范围,我的函数参数我的、控制器、函数、范围

2023-09-14 23:09:32 作者:菠萝小仙女

的我要寻找一个伪code答案,或者概念性的答案,请。的

编程数年之后,我从来没有创建一个接收函数参数,使得本方法的调用者自动获得访问无形属性的类方法。

如果我尝试访问我的 my_app.controller(...)方法之外$范围,我得到一个错误,所以我知道这不是全球性的;如果我尝试从 my_app应用。$范围访问角。$范围我得到了一个未定义。

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

  my_app.controller('my_controller',函数($范围,...){...} 
SPC1系列控制器的功能参数说明

更新(因为我学习):

  //的javascript  VAR my_class =功能(argument_A)                       {this.some_prop = argument_A;                         this.some_method =功能(argument_B)                           {执行console.log(argument_B); //功能(BOO)                           };                       };  VAR my_instance =新my_class(my_string);  VAR my_function_argument =功能(BOO){};  my_instance.some_method(my_function_argument); 

解决方案

函数是一等公民

在JavaScript和其它现代语言(斯卡拉,哈斯克尔,LISP等),函数被视为一等公民。具体来说,这意味着该语言支持功能传递作为参数传递给其他函数,返回他们从其他函数的值,并将其分配给变量或将它们存储在数据结构。一些编程语言理论家需要匿名函数(函数文本),以及支持。与第一类函数语言,函数的名称没有任何特殊的地位;他们被视为带有​​一个功能型普通变量。 1

上面的例子可以被重新分解为:

  VAR = myController的功能($范围,...){     的console.log($范围内);     $ scope.message =世界,你好};my_app.controller('my_controller',myController的); 

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

后来当 $编译服务遇到需要控制器的指令:

 < D​​IV NG控制器=my_controller>    {{信息}}< / DIV> 

$编译服务创建一个新的范围,检索从 myController的功能 $控制器服务高速缓存,并调用新范围作为函数的第一个参数的功能。

$编译服务还创建了一个 $观看监听功能,它可跟踪 $ scope.message 变量。在每个消化周期,如果 $ scope.message 发生了变化,DOM适当更新。

在从问题的例子:

  //这是函数调用,变量必须定义的console.log(BOO); //错误:嘘没有定义my_instance.some_method(BOO); //错误:嘘没有定义 

最后一种形式使用一个匿名函数文本(或功能前pression)。匿名函数是作为参数传递给指定的方法传递的对象 .some_method

  //匿名函数是作为参数传递的对象//被调用函数时提供嘘参数my_instance.some_method(功能(BOO){}); // NO ERROR 

有关函数文本的更多信息,请参见 MDN javascript参考 - 函数前pression

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

通常在JavaScript中,函数参数连接按位置即可。在AngularJS框架下,函数参数通过名称注入。如何做呢?

从文档:

  

推理

    

在JavaScript调用的toString()在函数返回函数定义。然后定义可以被解析和函数参数可以被提取。

- AngularJS $喷油器服务API参考 - 推理

因此​​,在例如:

  my_app.controller('my_controller',函数($范围,...){...} 

$注射器服务做了的toString()在控制器建设中的作用,并分析它。该服务检测到 $范围是函数的第一个参数,并使用这些知识来正确地调用该函数。

您可以看到 fn.toString()正在使用的在这里的源$ C ​​$ C 。

I am looking for a pseudo code answer, or conceptual answer please.

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.

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

解决方案

Functions Are First Class Citizens

In JavaScript and other modern languages (Scala, Haskell, LISP, etc.), functions are treated as first-class citizens. Specifically, this means the language supports passing functions as arguments to other functions, returning them as the values from other functions, and assigning them to variables or storing them in data structures. Some programming language theorists require support for anonymous functions (function literals) as well. In languages with first-class functions, the names of functions do not have any special status; they are treated like ordinary variables with a function type.1

The above example can be re-factored as:

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

my_app.controller('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;

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

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

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.

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.

In the examples from the question:

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

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

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

Dependency Injection and Connecting Arguments by Name

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

From the Docs:

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 Service API Reference -- Inference

So in the example:

my_app.controller('my_controller' , function( $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.

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

 
精彩推荐
图片推荐