AngularJS:当传递$范围变量函数 [英] AngularJS: When to pass $scope variable to function
问题描述
我使用的是 TodoMVC 应用获取与AngularJS框架更好。在<一个href=\"https://github.com/tastejs/todomvc/blob/gh-pages/architecture-examples/angularjs/index.html\">index.html上线14-16您看到这一点:
I am using the TodoMVC app to get better with the AngularJS framework. In the index.html on lines 14-16 you see this:
<form id="todo-form" ng-submit="addTodo()">
<input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo" autofocus>
</form>
请注意 NG-提交的指令调用的 addTodo()的无功能的 newTodo 的模型被作为参数传递。
Notice how the ng-submit directive calls the addTodo() function without the newTodo model being passed as an argument.
一个短的时间后,我在同样的文件遇到下列code来到第19行:
A short time later I came across the following code in the very same file on line 19:
<input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
您可以看到笔者决定到的 allChecked 的模型传递到的 markAll()的功能,这个时候。如果我理解正确的话,他们可以参考的 $ scope.allChecked 的控制器,而不是通过它,里面
You can see the author decided to pass the allChecked model to the markAll() function this time. If I understand correctly, they could have referenced $scope.allChecked inside the controller instead of passing it in.
为什么在同一个文件中使用两种不同的方法?在某些情况下,一种方法更好?这就是不一致的情况下,还是有使用了更深层次的逻辑是什么?
Why use two different approaches in the same file? Is one approach better in some circumstances? Is this a case of inconsistency or is there a deeper logic being used?
推荐答案
我想preFER总是在参数传递给函数:
I would prefer to always pass in arguments to the function:
- 这是更清楚哪些参数功能的期望。
- 它更容易单元测试,因为的所有的参数都注入到功能的。(好单位 - 测试)
考虑以下情况:
$scope.addToDo = function(){
//This declaration is not clear what parameters the function expects.
if ($scope.parameter1){
//do something with parameter2
}
}
和更糟糕的:
$scope.addToDo = function(){
//This declaration is not clear what parameters the function expects.
if ($scope.someobject.parameter1){ //worse
}
}
由于范围继承参数2
可能来自父范围,访问参数2
里面的函数创建一个的紧耦合的后,也引起麻烦,当您试图单元测试该功能。
Because of scope inheritance parameter2
may come from parent scope, accessing parameter2
inside the function creates a tight coupling, also causes troubles when you try to unit-test that function.
如果我这样定义功能:
//It's clearer that the function expects parameter1, parameter2
$scope.addToDo = function(parameter1, parameter2){
if (parameter1){
//do something with parameter2
}
}
如果您的参数2
是由父母继承的范围内,你仍然可以从该视图通过。当你做单元测试,可以很容易地传递所有的参数。
In case your parameter2
is inherited from parent scope, you could still pass it in from the view. When you do unit-testing, it's easy to pass all parameters.
如果你曾经使用ASP.NET MVC的工作,你会发现类似的东西:框架试图注入参数转化为行动的功能,而不是直接从请求访问它
或的HttpContext
对象
If you have ever worked with ASP.NET MVC, you would notice something similar: the framework tries to inject parameters into action function instead of accessing it directly from Request
or HttpContext
object
这也是在其他情况下都好喜欢与 NG-重复
It's also good in case others have mentioned like working with ng-repeat
在我看来,控制器和模型的角度不是很清楚分开。在$范围对象看起来像我们的属性和方法(型号还包含逻辑)模型。从OOP背景的人会认为:我们只通过在不属于对象参数。就像一个Person类已经有手
,我们并不需要在手
通过为每个对象的方法。一个例子code是这样的:
In my opinion, Controller and Model in angular are not quite clearly separated. The $scope object looks like our Model with properties and methods (Model contains also logic). People from OOP background would think that: we only pass in parameters that don't belong to object. Like a class Person already has hands
, we don't need to pass in hands
for every object method. An example code like this:
//assume that parameter1 belongs to $scope, parameter2 is inherited from parent scope.
$scope.addToDo = function(parameter2){
if ($scope.parameter1){ //parameter1 could be accessed directly as it belongs to object, parameter2 should be passed in as parameter.
//do something with parameter2
}
}
这篇关于AngularJS:当传递$范围变量函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!