Question

我在angularJs中编写了一个自定义指令，以显示棋盘。但是，虽然我在html页面中包含了两次，但只渲染了一个。

我的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>

这是我的剧本：

(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);
        }
      }
    };
  }]);
})();

我尝试使用隔离范围，但它不会改变任何内容。

Answer 1

您需要明确关闭自定义chess-board元素。

所以改变这个：

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

到此：

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

这是基于一种误解，即HTML5自动关闭标签的工作原理与XML / XHTML相同（我也是这么认为 - 我在回答你的问题时才发现这一点！）。

有关详细信息，请查看这两个链接：

http://tiffanybbrown.com/2011/03/23/html5-does-not-allow-self-closing-tags/ https://stackoverflow.com/a/3558200/81723

总结一下这个问题，在HTML5中：

<chess-board /> == <chess-board>
<chess-board /> != <chess-board></chess-board>

在您的特定情况下，由于标签未关闭，第二个指令接收的元素与第一个指令相同，因此您只看到一个棋盘。

我方向的两个实例，但只有一个输出

1 个答案: