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屋！