Javascript 重复变量名

如何知道

ng repeat

指令中使用的变量的名称

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

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

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

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

问题是我选择使用

ng repeat=“items中的whatever”

它将停止工作，因为这样我就应该使用

scope.whatever.length

是否仍然需要知道所选变量的名称

干杯

---

更新：问题是如何知道财产的名称。。。但是不在其他地方指出它。

创建一个双向绑定范围。不过，您必须传递变量名

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

            ...
        }
      };
})

...
.directive（“ngListItemMulti”，函数（）{
返回{
限制：“AE”，
范围：{
itemMulti:“=”
},
链接：功能（范围、元素、属性、控制器）{
var itemCount=scope.itemMulti.length；
...
}
};
})

创建双向绑定作用域。不过，您必须传递变量名

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

            ...
        }
      };
})

...
.directive（“ngListItemMulti”，函数（）{
返回{
限制：“AE”，
范围：{
itemMulti:“=”
},
链接：功能（范围、元素、属性、控制器）{
var itemCount=scope.itemMulti.length；
...
}
};
})

您可以使用angular在ngRepeat代码中使用的内容。使用：

var表达式=$attr.ngRepeat

以获取表达式

var match=expression.match（/^\s*（[\s\s]+？）\s+在\s+（[\s\s]+？）（？：\s+track\s+by\s+（[\s\s]+？）？\s*$/）来中断表达式

var集合=匹配[2]以获取集合

$scope.$watchCollection（rhs，fn）观看收藏

然后在watch函数（fn）中可以使用collection.length；
如果不想观看，可以使用$parse获取值。
可以使用angular在ngRepeat代码中使用的内容。使用：

var表达式=$attr.ngRepeat
以获取表达式

var match=expression.match（/^\s*（[\s\s]+？）\s+在\s+（[\s\s]+？）（？：\s+track\s+by\s+（[\s\s]+？）？\s*$/）来中断表达式

var集合=匹配[2]以获取集合

$scope.$watchCollection（rhs，fn）观看收藏

然后在watch函数（fn）中可以使用collection.length；
如果您不想观看，可以使用$parse获取值。
为了解决您的问题，我们希望能够将指令内的范围与指令外的范围分开，然后将外部范围映射到指令的内部范围。这可以通过使用隔离作用域来实现。为此，我们将向指令对象添加一个
scope
属性：

scope: {
  item: '=item'
}

我们的完整指令现在可能如下所示：

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

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

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

这可以在我们的html中使用，如下所示：

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

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

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



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

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

以下是一个plnkr及其工作示例：

有关指令的文档，特别是隔离作用域的文档可以在以下位置找到：。（ctrl+f“隔离指令的范围”）

希望这有帮助：-）
为了解决您的问题，我们希望能够将指令内的作用域与指令外的作用域分开，然后将外部作用域映射到指令的内部作用域。这可以通过使用隔离作用域来实现。为此，我们将向指令对象添加一个
scope
属性：

scope: {
  item: '=item'
}

我们的完整指令现在可能如下所示：

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

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

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

这可以在我们的html中使用，如下所示：

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

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

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



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

另外，请注意，我已将您的指令重命名为
listItemMulti
，而不是
ngListItemMulti
。
ng