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

当我将此组件A包含在ng-include =＆＃34; ＆＃39; file.html＆＃39; ＆＃34;在我的B组件中，我遇到了问题，因为实例具有相同的ID，当我按下第二个容器时，第一个容器调整大小（对于我按哪个容器不重要，因为只有第一个容器会调整大小）。所以，主要问题是：如何让这些实例拥有自己的ID？

谢谢，

稍后编辑：

对于包含部分我使用

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

Answer 1

答案已在评论中给出，但重要的是在答案中表达。 DOM元素的Id应该是唯一的。

所以你的问题标题已经存在问题，它应该是：

多个实例，不同的ID

在html元素的id标记上阅读更多here at mozilla或here at WC3，并且这些标记必须是唯一的。

您需要确保不重复ID，并且必须使用其他内容来查找您的元素。最好的是className找到它们：

var elements = document.getElementsByClassName("className");

Answer 2

而是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中的

旁注：我认为更好地使用类而不是隐藏任何输入

更新而非template您可以使用templateUrl并将网址传递给componentA.html

文件

多个实例，相同的ID

2 个答案: