如何有效角的控制器方法化妆$范围,我的函数参数 [英] How does angular's controller method make $scope available to my function argument
问题描述
的我要寻找一个伪code答案,或者概念性的答案,请。的
编程数年之后,我从来没有创建一个接收函数参数,使得本方法的调用者自动获得访问无形属性的类方法。
如果我尝试访问我的 my_app.controller(...)
方法之外$范围,我得到一个错误,所以我知道这不是全球性的;如果我尝试从 my_app应用。$范围访问
或角。$范围
我得到了一个未定义。
那么,如何我的函数参数访问它:
my_app.controller('my_controller',函数($范围,...){...}
更新(因为我学习):
//的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的;
后来当 $编译
服务遇到需要控制器的指令:
< DIV 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()
在函数返回函数定义。然后定义可以被解析和函数参数可以被提取。
块引用>因此,在例如:
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 frommy_app.$scope
orangular.$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 themyController
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 themyController
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 atoString()
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.这篇关于如何有效角的控制器方法化妆$范围,我的函数参数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!