我的指令的兩個instaces，但只有一個輸出

我已經在angularJs中編寫了一個自定義指令，以顯示一個棋盤。但是，儘管我在html頁面中包含了兩次，但只有一個被渲染。我的指令的兩個instaces，但只有一個輸出

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

我帶隔離範圍嘗試，但它不會改變任何東西。

來源

2015-04-02 loloof64

您需要明確關閉自定義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（我也這樣認爲 - 我只是在回答你的問題時才發現這件事！）。

總結問題，在HTML5：

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

在特定情況下，由於標籤間沒有關閉第二個指令收到與第一個指令相同的元素，所以你只看到一個棋盤。

來源

2015-04-02 23:44:27

謝謝。我甚至沒有想過檢查這種可能性。 – loloof64 2015-04-03 08:31:38

我的指令的兩個instaces，但只有一個輸出

回答

相關問題