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等)中,函数被视为一等公民.具体来说,这意味着该语言支持将函数作为参数传递给其他函数,将其作为其他函数的值返回,并将其分配给变量或存储在数据结构中.一些编程语言理论家也需要支持匿名函数(函数文字).在具有一流功能的语言中,功能名称没有任何特殊状态.它们被视为具有函数类型的普通变量. 1
以上示例可以重构为:
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.
You can see fn.toString()
being used here in the source code.
这篇关于angular&#39;控制器方法如何使$ scope可用于我的函数参数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!