javascript - 多个实例，相同的 ID

Question

我是 Html/Css/Js 的新手，所以这可能是一个虚拟问题。我正在尝试制作一个组件 A(一个在您按下它时会自动调整大小的容器)，以便在其他组件 B 中使用 ng-include 使用它(我想在组件 B 中包含组件 A 的一些实例)。

我已经阅读过它并且我正在使用带有复选框的技巧 ( http://jsfiddle.net/nMNJE/ )

HTML:

  <input type="checkbox" id="button">
  <label class="ani" for="button"></label>

CSS:

    input{
    display:none;
    }
    .ani
    {
        width:100px;
        height:100px;
        border: solid thin black;
        transition:width 2s;
       -moz-transition:width 2s; /* Firefox 4 */
       -webkit-transition:width 2s; /* Safari and Chrome */
       -o-transition:width 2s; /* Opera */
        display:block;
   }
   input:checked + .ani{width:300px;}

当我在 B 组件中包含带有 ng-include="'file.html' "的组件 A 时，我遇到了问题，因为实例具有相同的 ID，当我按下第二个容器时，第一个容器会调整大小(我按下哪个容器并不重要，因为只有第一个会调整大小)。因此，主要问题是:如何让这些实例拥有自己的 ID？

谢谢，

稍后编辑:

对于我使用的包含部分

<div ng-include="'componentA.html'"></div>

Answer 1

相反，ng-include 您可以只创建一个自定义指令，并为输入生成唯一的 id。像这样

angular.module('app', [])
  .controller('ctrl', function() {})
  .directive('myComponent', function() {
    var count = 0;
    return {
      scope: true, //create isolated scope
      template: '<input type="checkbox" id="button{{::num}}"> \
                 <label class="ani" for="button{{::num}}"></label>',//set template for directive
      link: function(scope) {
        scope.num = ++count; //add unique suffix
      }
    }
  });

    input {
      display: none;
    }
    .ani {
      width: 100px;
      height: 100px;
      border: solid thin black;
      transition: width 2s;
      -moz-transition: width 2s;
      /* Firefox 4 */
      -webkit-transition: width 2s;
      /* Safari and Chrome */
      -o-transition: width 2s;
      /* Opera */
      display: block;
    }
    input:checked + .ani {
      width: 300px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<div ng-app="app">
  1
  <div my-component></div>
  2
  <div my-component></div>
  3
  <div my-component></div>
  4
  <div my-component></div>
  5
  <div my-component></div>
  6
  <div my-component></div>

</div>

旁注:在 css 中我认为最好使用类而不是隐藏任何输入

更新:您可以使用 templateUrl 而不是 template 并将 url 传递给您的文件，例如 componentA.html