Question

在我的一个观点中，我使用 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 ，而此是指 $ local
$ scope和$ local都可以访问removeProduct（）中的产品。 $ local有访问权限从$ scope继承产品

在removeProduct（）中，我需要一种方法来查找传递的产品索引并将其从数组中拼接出来。

我可以用 3种方式：

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

真的有什么不同吗？我应该偏好一种方式而不是另一种方式吗？

Answer 1

在选项1和2之间存在差异，使用this您将通过当前范围的原型访问products，即$local.$parent或$local.__proto__（$local是ng-repeat按照您的建议创建的新范围）。您不会注意到使用原型访问products这一事实会对性能产生影响（即使原型链查找需要O(n)）。无论如何，我想通过products作为参数会有最大的表现，但差别可以忽略不计。

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

Angular $ scope使用最佳实践

1 个答案: