Angular ui timepicker弹出没有显示出来

Question

以下代码未显示弹出时间戳.知道怎么解决？

码:

<ul class="dropdown-menu custom-scroll dropDownLabel custom-width" role="menu" aria-labelledby="btn-append-to-body"
                    ng-show="!sr.timedisplay"	
                >
                    <li role="menuitem">
                        <a href="" ng-click="$event.stopPropagation()">Start Time
                           
							<p class="input-group">
								<input type="text" class="form-control" timepicker-popup ng-model="sr.startTime" is-open="opened" timepicker-options="timeOptions" ng-required="true"/>
									<span class="input-group-btn">
										<button class="btn btn-default" ng-click="sr.getTime('startTime')"><i class="glyphicon glyphicon-time"></i></button>
									</span>
								</p>
                        </a>
                    </li></ul>

Answer 1

没有这样的东西timepicker-popup,至少在官方文档中没有 - 问题被标记为angular-ui-bootstrap？

但你可以使用timepicker和a 创建一个dropdown:

<span uib-dropdown auto-close="outsideClick">
  <a href uib-dropdown-toggle>
    {{ displayTime }}
  </a>
  <ul class="uib-dropdown-menu">
     <li>
        <uib-timepicker ng-model="mytime" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></uib-timepicker>
     </li>
  </ul>
</span>

该脚本与timepicker docs基本相同,除了displayTime用于下拉列表:

$scope.$watch('mytime', function(newValue, oldValue) {
    var hour = $scope.mytime.getHours()-($scope.mytime.getHours() >= 12 ? 12 : 0),
        hour = hour<10 ? '0'+hour : hour,
        minutes = ($scope.mytime.getMinutes()<10 ? '0' :'') + $scope.mytime.getMinutes(), 
        period = $scope.mytime.getHours() >= 12 ? 'PM' : 'AM';
    $scope.displayTime = hour+':'+minutes+' '+period
  })

plnkr - > http://plnkr.co/edit/J4alKogyKuevSGdTkLFQ?p=preview

注意:plnkr在0.14.3.如果您在0.14.0之前使用Angular UI Bootstrap,那么当然会跳过uib-前缀并且它会起作用.

带字形的按钮样式:

<span class="btn btn-default" uib-dropdown auto-close="outsideClick" >
  <a href uib-dropdown-toggle>
    {{ displayTime }} <i class="glyphicon glyphicon-time"></i>
  </a>  
  <ul class="uib-dropdown-menu">
     <li>
        <uib-timepicker ng-model="mytime" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></uib-timepicker>
     </li>
  </ul>
</span>

http://plnkr.co/edit/fyC6TfDsrJqsuGCqm11t?p=preview

Answer 2

这曾经工作:

<uib-timepicker></uib-timepicker>

现在你需要这样做:

<div uib-timepicker></div>