md-datepicker在模板URL中拋出錯誤html

Question

我是新來的角js，我正在使用單個頁面應用程序。我必須在我的孩子html頁面中顯示Angular材料Datepicker。我已經嘗試過，但我收到以下錯誤消息。請幫我解決這個問題。

指令'mdButton'的模板必須只有一個根元素。

下面是我的代碼

指令：

(function() { 

"use strict"; 

angular.module('app').directive('bmDatetest', [function() { 
    return { 

     scope: { 

     }, 

     templateUrl: "/app/test/bmDateTestTemplate.html", 
     controller: "dateTestController as vm" 
    } 
}]); 

})(); 

的Html

 <div class="panel-heading" style="font-size:large">Date Test</div> 



     <div class="row"> 

      <h3>Basic Smart-Table Starter</h3> 
      <table st-table="vm.rowCollection" class="table table-striped"> 
       <thead> 
        <tr> 
         <th>first name</th> 
         <th>last name</th> 
         <th>birth date</th> 
        <th>balance</th> 
        <th>email</th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr ng-repeat="row in vm.rowCollection"> 
        <td>{{row.firstName}}</td> 
        <td>{{row.lastName}}</td> 
        <td>{{row.birthDate | date:'shortDate'}}</td> 
        <td>{{row.balance}}</td> 
        <td>{{row.email}}</td> 
       </tr> 
       </tbody> 
      </table> 

     </div> 

     <div class="row"> 

      <md-content> 
       <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker> 
      </md-content> 


      <div class="col-md-4"> 
       <input id="dateTextBox" placeholder="dd/mm/yyyy" title="dateTextBox" type="text" value=""> 
      </div> 




     </div> 
     </div> 

Answer 1

常e你的代碼是這樣的，你的開放div標籤應該在最後關閉。

<div> 
    <div class="panel-heading" style="font-size:large">Date Test</div> 

    <div class="row"> 

     <h3>Basic Smart-Table Starter</h3> 
     <table st-table="vm.rowCollection" class="table table-striped"> 
      <thead> 
       <tr> 
        <th>first name</th> 
        <th>last name</th> 
        <th>birth date</th> 
        <th>balance</th> 
        <th>email</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="row in vm.rowCollection"> 
        <td>{{row.firstName}}</td> 
        <td>{{row.lastName}}</td> 
        <td>{{row.birthDate | date:'shortDate'}}</td> 
        <td>{{row.balance}}</td> 
        <td>{{row.email}}</td> 
       </tr> 
      </tbody> 
     </table> 

    </div> 

    <div class="row"> 

     <md-content> 
      <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker> 
     </md-content> 

     <div class="col-md-4"> 
      <input id="dateTextBox" placeholder="dd/mm/yyyy" title="dateTextBox" type="text" value=""></input> 
     </div> 

    </div> 
</div>