Angular $scope 使用最佳实践答案

【问题标题】：Angular $scope usage best practiceAngular $scope 使用最佳实践
【发布时间】：2013-07-26 11:37:50
【问题描述】：

在我的一个观点中，我使用 ng-repeat 指令来列出我的产品（属性无关）：

<div ng-controller="MainCtrl>  

  <table>  

    <tr ng-repeat="product in products">  

      <td>{{product.name}}</td>  

      <td><input type="button" ng-click="removeProduct(product)"/></td>  

    </tr>  

  </table>  

</div>

MainCtrl如下：

myApp.controller('MainCtrl', function($scope){

    $scope.products = [...];

    $scope.removeProduct = function(product){

    }   

});

我的问题与 removeProduct() 函数和实现它的最佳方式有关。

据我了解：

ng-repeat 在每次重复中创建一个新范围（我们称之为 $local）
$local 继承自 $scope，而 $scope 又继承自根范围
在 removeProduct() 函数内部 $scope 指的是 $scope 而 this 指的是 $local
$scope 和 $local 都可以访问 removeProduct() 中的产品。 $local 具有访问权限，原因是从 $scope 继承产品

在 removeProduct() 中，我需要一种方法来找到传递的产品的索引并从数组中拼接它。

我可以通过 3 种方式实现这一点：

使用 $scope.products
使用 this.products
不使用上述任何方法，并将产品作为第二个参数传递给视图中的函数 [removeProduct(product, products)]

真的有区别吗？我应该更喜欢一种方式而不是另一种方式吗？为什么？

【问题讨论】：

标签： angularjs angularjs-scope

【解决方案1】：

选项 1 和 2 之间的区别在于，使用 this 您将通过当前作用域的原型访问 products，即 $local.$parent 或 $local.__proto__（$local 是由 ng-repeat 创建的新作用域，例如你建议）。您不会注意到使用原型访问products 对性能的影响（即使原型链查找采用O(n)）。无论如何，我想将products 作为参数传递将具有最佳性能，但差异可以忽略不计。

在我看来，最好的选择是您列表中的第一个。至少它使代码更具可读性，因为您显式地初始化了$scope 的属性products，因此在removeProduct 中可以清楚地找到products 的位置。要理解第二个，您必须知道 removeProduct 函数的当前作用域是新的，它的父作用域是外部 $scope，它保持对 products 的引用...如果 Angular 新手读到它对他来说就不太清楚了。

【讨论】：