1

在我的一个观点中，我使用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()函数和实现它的最佳方式有关。

据我了解：

  1. ng-repeat 在每次重复中创建一个新范围（我们称之为 $local）

  2. $local 继承自 $scope，而 $scope 又继承自根范围

  3. 内部 removeProduct() 函数$scope指的是$scope而this指的是$local

  4. $scope 和 $local 都可以访问 removeProduct() 中的产品。$local 具有访问权限，原因是从 $scope 继承产品

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

我可以通过3 种方式实现它：

  1. 使用 $scope.products

  2. 使用 this.products

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

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

4

1 回答 1

2

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

在我看来，最好的选择是您列表中的第一个。至少它使代码更具可读性，因为您显式地初始化了 的属性products，$scope所以在哪里可以找到removeProduct它会很清楚。products为了理解第二个，你必须知道removeProduct函数的当前范围是新的，它的父范围是外部的$scope，它一直引用products...如果 Angular 的新手读到这个，他就不太清楚了。

于 2013-07-26T11:53:55.463 回答