Angularjs 我的指令有两次，但只有一次输出_Angularjs

Angularjs 我的指令有两次，但只有一次输出

angularjs

Angularjs 我的指令有两次，但只有一次输出,angularjs,Angularjs,我用angularJs编写了一个自定义指令，以显示一个棋盘。但是，尽管我在html页面中包含了两次，但只呈现了一次这是 My index.html <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <meta charset="utf-

我用angularJs编写了一个自定义指令，以显示一个棋盘。但是，尽管我在html页面中包含了两次，但只呈现了一次

这是

My index.html

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="static-board">

  <chess-board /></br>
  <chess-board cells-size="30"/>

</body>
</html>


JS-Bin

这是我的剧本：

(function(){

  angular.module('static-board', [])
      .directive('chessBoard', [function(){

        function getBoardHtml(cellsSize){

      // taken from http://stackoverflow.com/questions/610406/javascript-equivalent-to-printf-string-format
      function sprintf() {
        var args = arguments,
        string = args[0],
        i = 1;
        return string.replace(/%((%)|s|d)/g, function (m) {
          // m is the matched format, e.g. %s, %d
          var val = null;
          if (m[2]) {
            val = m[2];
          } else {
            val = args[i];
            // A switch statement so that the formatter can be extended.     Default is %s
            switch (m) {
              case '%d':
                val = parseFloat(val);
                if (isNaN(val)) {
                  val = 0;
                }
                break;
              }
              i++;
            }
            return val;
          });
        }

      function getBackground(size){
        return sprintf("<rect x='0' y='0' width='%d' height='%d' fill='#BAA' />", size, size);
      }

      function getCells(cellsSize){
        function getSingleCell(cellX, cellY){
          var x = cellX*cellsSize + cellsSize/2;
          var y = cellY*cellsSize + cellsSize/2;
          var color = (cellX+cellY)%2 === 0 ? "#E9E637" : "#7C4116";
          return sprintf("<rect x='%d' y='%d' width='%d', height='%d'     fill='%s' />",
            x,y, cellsSize, cellsSize, color);
        }

        var result = "";
        for (var line = 0; line < 8; line++){
          for (var col = 0; col < 8; col++){
            result += getSingleCell(col, line)+'\n';
          }
        }

        return result;
      }

      var size = 9*cellsSize;
      var result = sprintf("<svg width='%d' height='%d'>\n%s\n%s\n</svg>",
        size, size, getBackground(size), getCells(cellsSize));
      return result;
    }

    return {
      restrict: 'E',
      link: {
        post : function(scope, element, attrs){
          var cellsSize = attrs.cellsSize || 20;
          var newElem = angular.element(getBoardHtml(cellsSize));
          element.replaceWith(newElem);
        }
      }
    };
  }]);
})();

（函数（）{
角度模块（'静态板'，[]））
.directive（'chessBoard'，[function（）{
函数getBoardHtml（cellsSize）{
//取自http://stackoverflow.com/questions/610406/javascript-equivalent-to-printf-string-format
函数sprintf（）{
var args=参数，
string=args[0]，
i=1；
返回字符串。替换（/%（%）| s | d）/g，函数（m）{
//m是匹配的格式，例如%s，%d
var-val=null；
if（m[2]）{
val=m[2]；
}否则{
val=args[i]；
//用于扩展格式化程序的switch语句。默认值为%s
开关（m）{
案例“%d”：
val=parseFloat（val）；
if（伊斯南（瓦尔））{
val=0；
}
打破
}
i++；
}
返回val；
});
}
函数getBackground（大小）{
返回sprintf（“”，size，size）；
}
函数getCells（cellsSize）{
函数getSingleCell（cellX，cellY）{
var x=cellX*cellsize+cellsize/2；
变量y=cellY*cellsSize+cellsSize/2；
变量颜色=（cellX+cellY）%2==0？#E9E637:“#7C4116”；
返回sprintf（“”，
x、 y，cellsize，cellsize，color）；
}
var结果=”；
用于（变量行=0；行<8；行++）{
for（变量col=0；col<8；col++）{
结果+=getSingleCell（列，行）+'\n'；
}
}
返回结果；
}
变量大小=9*cellsSize；
var result=sprintf（“\n%s\n%s\n”，
大小，大小，getBackground（大小），getCells（cellsSize））；
返回结果；
}
返回{
限制：'E'，
链接：{
post：功能（范围、元素、属性）{
var cellsize=attrs.cellsize | | 20；
var newElem=angular.element（getBoardHtml（cellsize））；
元素。替换为（newElem）；
}
}
};
}]);
})();

我尝试使用隔离作用域，但它没有改变任何东西。

您需要显式关闭自定义的

棋盘元素
因此，改变这一点：
<chess-board /><br/>
<chess-board cells-size="30" />




为此：
<chess-board></chess-board><br/>
<chess-board cells-size="30"></chess-board>




这是基于一种误解，即HTML5自动关闭标记的工作原理与XML/XHTML相同（我也这么认为——我只是在回答您的问题时才发现这一点！）
有关更多信息，请查看以下两个链接：


总结一下这个问题，在HTML5中：
<chess-board /> == <chess-board>
<chess-board /> != <chess-board></chess-board>

==
!= 

在您的特定情况下，由于标记没有关闭，第二个指令接收到与第一个指令相同的元素，因此您只看到一个棋盘。
谢谢。我甚至没有考虑过检查这种可能性。