2016-07-25 12 views
0

私は角度jを初めて使用しており、私は単一のページアプリケーションで作業しています。私は子供のhtmlページの中に角度の材料Datepickerを表示する必要があります。私は試しましたが、次のエラーメッセージが表示されます。これを解決するのを手伝ってください。テンプレートのURLにmd-datepickerがエラーを発生します。html

テンプレート 'mdButton'には、正確に1つのルート要素が必要です。以下は

私のコード

指令です:

(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> 

+0

あなたは、タグ –

+0

は、あなたの完全なhtmlコード –

+0

を共有開くとディレクティブのテンプレートを閉じる必要があります私はまだ同じエラーに –

答えて

0

チャンこのようなあなたのコードは、あなたの開始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> 
+0

を共有? –

+0

を取得していますが、この

test
のようなサンプルコードを置くことができ、それが働いている私の完全なHTMLコード –

+0

回答が更新されました。今すぐチェック –

関連する問題