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

像这样更改你的代码，你的开始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>