Question

如何知道ng-repeat指令中使用的变量的名称？

我有两个这样的嵌套指令：

<div data-ng-list-item-multi ng-repeat="item in items | isArray">
  ...
</div>

然后，指令需要知道item变量（即数组）中存在多少个元素，但它是通过我在ng-repeat子句中选择的属性命名的属性公开的：

.directive("ngListItemMulti", function(){
    return {
        restrict: 'AE',
        link: function(scope, element, attrs, controller) {
            var itemCount = scope.item.length;

            ...
        }
      };
})

问题是我选择使用ng-repeat="whatever in items"它会停止工作，因为那时我应该使用scope.whatever.length。

有没有知道所选变量的名称？

干杯。

更新：问题是如何知道属性的名称......但没有在其他地方指出。

Answer 1

创建双向绑定范围。您必须传递变量名称。

<div data-ng-list-item-multi item-multi="item" ng-repeat="item in items | isArray">
  ...
</div>


.directive("ngListItemMulti", function(){
    return {
        restrict: 'AE',
        scope: {
            itemMulti: '='
        },
        link: function(scope, element, attrs, controller) {
            var itemCount = scope.itemMulti.length;

            ...
        }
      };
})

Answer 2

您可以在ngRepeat代码中使用角度使用。使用方法：

var expression = $attr.ngRepeat;获取表达式

var match = expression.match(/^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?\s*$/)打破表达

var collection = match[2];获取收藏品

$scope.$watchCollection(rhs, fn);观看收藏

然后在watch函数（fn）中你可以使用你可以使用collection.length; 如果你不想看，你可以使用$ parse来获得价值。

Answer 3

为了解决您的问题，我们希望能够做的是将指令内的范围与外部范围分开，然后将外部范围映射到指令的内部范围。这可以使用隔离范围来完成。为此，我们将向指令对象添加scope属性：

scope: {
  item: '=item'
}

我们的完整指令现在看起来像这样：

myApp.directive('listItemMulti', function($log) {
  return {
    restrict: 'E',
    link: function(scope, elem) {
        var length = scope.item.length;
        ...
    },
    scope: {
      item: '=item'
    }
  }
});

这可以在我们的html中使用：

<div ng-controller="SampleCtrl">
  <list-item-multi ng-repeat="whatever in items" item="whatever">
  </list-item-multi>
</div>

我们在这里做的是在我们的指令中指定一个变量，当我们在html中使用我们的指令时，我们可以绑定它。这里我们添加了变量item。现在可以通过在我们的自定义元素上使用变量名作为html属性来指定它。请注意我们如何将whatever分配给属性item。现在，在我们的link函数中，我们的scope变量将包含item绑定的值。这允许我们指定我们希望在out指令中可见的特定变量，但也提供额外的间接层，以防止我们的代码变脆。我们现在可以将外部变量的名称更改为我们想要的任何内容，而无需在指令中更改任何内容。

另请注意，我已将您的指令重命名为listItemMulti而非ngListItemMulti。指令的ng前缀是特定于内置角度指令的约定。您应该避免在自定义指令中使用此前缀，以便可以防止可能发生的任何意外命名冲突。通常，最佳做法是为所有指令提供与应用程序名称相关的标准前缀。例如，如果我正在为Stack Overflow开发一个应用程序，我可以在我的所有指令前加上so。

这是一个带有工作示例的plnkr：http://plnkr.co/edit/BdtWcuUz34GxhkrKWCwS?p=preview

有关指令的文档，特别是隔离范围可以在这里找到：https://docs.angularjs.org/guide/directive。（ctrl + f“隔离指令的范围”）。

希望这会有所帮助： - ）

ngRepeat变量名

3 个答案: