Two instaces of my directive, but only one output

Question

I've coded a custom directive in angularJs, in order to show a chess board. But though I include it two times into the html page, only one is rendered.

Here is my JS Bin attempt

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>

Here is my script :

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

I tried with isolated scope, but it does not change anything.

score 2 · Accepted Answer · edited May 23 '17 at 12:22

You need to explicitly close your custom chess-board elements.

So change this:

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

to this:

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

This is based on a misconception that HTML5 self-closing tags work the same as XML/XHTML (I thought so too - I only found out about this in answering your question!).

Have a look at these two links for more information:

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

To summarise the issue, in HTML5:

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

In your specific case, because the tags weren't closed the second directive received the same element as the first directive so you only saw one chessboard.

Thanks. I did not even thought about checking this possibility. — loloof64, Apr 03 '15 at 08:31

Two instaces of my directive, but only one output

1 Answers1