Angular Datetimepicker:指令'的模板;uib时间选择器'必须只有一个根元素
Angular Datetimepicker: Template for directive 'uibTimepicker' must have exactly one root element
我正试图使用这个库在AngularJS中实现dateTimePicker:Angular dateTimePicker
我用Bower安装了库,注入了模块,并复制/粘贴了示例代码。
控制器:
// Disable weekend selection
$scope.isDisabledDate = function(currentDate, mode) {
return mode === 'day' && (currentDate.getDay() === 0 || currentDate.getDay() === 6);
};
视图:
<datetimepicker ng-model="date"
date-format="dd-MMM-yyyy"
date-options="dateOptions"
date-disabled="isDisabledDate(date, mode)">
</datetimepicker>
问题是日期字段是空的,在控制台中我有两个错误:
angular.js:12520 Error: [$compile:tplrt] Template for directive 'uibDatepicker' must have exactly one root element. uib/template/datepicker/datepicker.html
angular.js:12520 Error: [$compile:tplrt] Template for directive 'uibDatepickerPopupWrap' must have exactly one root element. uib/template/datepicker/popup.html
更新:这是新的html,我用一个元素对标签进行了修改:
<div class='form-group'>
<datetimepicker ng-model="appointment.date"
date-format="dd-MMM-yyyy"
date-options="dateOptions"
date-disabled="isDisabledDate(date, mode)">
</datetimepicker>
</div>
表单的整个html如下:
<div ng-controller='createAppointmentCtrl'>
<div class="row">
<div class="col-xs-12">
<div class='form-group'>
<label class="control-label">Select client</label>
<select ng-model="appointment.customer" class='form-control'>
<option value='0'>New client</option>
<option ng-repeat="client in clients_list" value="{{client.id}}">{{client.name}} {{client.surname}}</option>
</select>
</div>
<div ng-show="appointment.customer == 0">
<div class='form-group'>
<label>Name</label>
<input ng-model="appointment.name" type="text" placeholder="name" class="form-control">
</div>
<div class='form-group'>
<label>Surname</label>
<input ng-model="appointment.surname" type="text" placeholder="surname" class='form-control'>
</div>
</div>
<label class='control-label'>Date</label><br>
<!--<input ng-model="appointment.date" id="expiry" name="expiry" type="datetime-local" required><br>-->
<datetimepicker ng-model="appointment.date"
date-format="dd-MMM-yyyy"
date-options="dateOptions"
date-disabled="isDisabledDate(date, mode)">
</datetimepicker>
<label class='control-label'>Price</label>
<input ng-model="appointment.price" type="number" placeholder="price" class='form-control'>
<button class='btn btn-primary' ng-click="create(appointment)" style='margin-top: 25px'>Generate appointment</button>
</div>
</div>
<div class='row'>
<div class="col-xs-12" ng-show="generated_link" style='margin-top: 25px'>
<label class="control-label">Generated link</label>
<input type="text" readonly="readonly" value="{{ generated_link }}" class='form-control'>
<div class="row">{{message}}</div>
</div>
</div>
</div>
摘自我的评论:
确保在应用程序中包含ui.bootstrap
依赖项,以及包含指令本身的html模板的ui-bootstrap-tpls.js
文件。
相关文章:
- 在动态创建的元素上获取对特定选择器的引用
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- Webdriver.io pageObject模式-通过传递参数来定义元素选择器
- 如何通过选择器元素将图像添加到javascript下拉警报消息中
- Angular Datetimepicker:指令'的模板;uib时间选择器'必须只有一个根元素
- 选择不带选择器的元素,仅使用元素ID
- 动态修改一个元素,使其与给定的选择器匹配
- 循环遍历元素jquery选择器
- jquery点击选择器附加在多个元素上
- 如何检查日期选择器和时间选择器元素是否使用JQuery/Javascript设置
- jquery复杂选择器,按元素和类以开头
- 如何查找包含特定选择器的父元素
- 如何在AnglujarJS ng中继器中选择特定元素
- 我可以让 jQuery UI 日期选择器元素在单击日期时不重置吗?
- Jquery 选择器元素内部的其他
- 当选择器元素被另一个元素遮挡时使用jQuery.on()
- Jquery返回对象而不是选择器元素
- 没有类的jQuery选择器元素
- 重新加载tableview的选择器元素与更新的数据在钛
- 引导时间选择器只选择第一个时间选择器元素