AngularJS:何时将 $scope 变量传递给函数 [英] AngularJS: When to pass $scope variable to function

问题描述

我正在使用 TodoMVC 应用来更好地使用 AngularJS 框架.在第 14-16 行的 index.html 中，您会看到这个:

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-submit 指令如何调用 addTodo() 函数，而没有将 newTodo 模型作为参数传递.

Notice how the ng-submit directive calls the addTodo() function without the newTodo model being passed as an argument.

不久之后，我在同一个文件的第 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?

推荐答案

我更愿意始终将参数传递给函数:

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

    }    
}

由于作用域继承parameter2可能来自父作用域，在函数内部访问parameter2会造成紧耦合，当您尝试对该函数进行单元测试时也会引起麻烦.

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

如果您的 parameter2 是从父作用域继承的，您仍然可以从视图中传递它.进行单元测试时，很容易传递所有参数.

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，你会注意到类似的东西:框架试图将参数注入到动作函数中，而不是直接从 Request 或 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-repeat

在我看来，角度中的控制器和模型并没有很清楚地分开.$scope 对象看起来像我们的模型，带有属性和方法(模型也包含逻辑).OOP背景的人会认为:我们只传入不属于对象的参数.就像类 Person 已经有 hands 一样，我们不需要为每个对象方法传入 hands.像这样的示例代码:

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:何时将 $scope 变量传递给函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！