AngularUI Timepicker - ポップアップで時間を選択

Question

時間を選択するのにAngularUIのタイムピッカー（https://angular-ui.github.io/bootstrap/）を使用しています 統合後、時間とフォーマットを選択できませんでしたが、datepickerのようにポップアップに表示する必要があります。 ユーザーが時間アイコンをクリックすると、時間選択のためのポップアップが表示されます。以下のコードで疲れましたが、うまくいきませんでした。

<input type="text" class="form-control" uib-timepicker-popup ng-model="mytime" is-open="popup1.opened" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian" ng-required="true" close-text="Close" />

私は同じのためplunkerを作った - http://plnkr.co/edit/yv3xT8KbP6pD7tV46Clf?p=preview

私は、ポップアップで時間の選択を表示するにはどうすればよいですか？

参考 - http://plnkr.co/edit/S8UqwvXNGmDcPXV7a0N3?p=preview（Timeオプションを選んでください）

Answer 1

あなたはtimepicker両方を使用して一緒にモーダルにする必要があります。

<p class="input-group"> 
    <input type="text" class="form-control" ng-model="mytime" /> 
    <span class="input-group-btn"> 
    <button type="button" class="btn btn-default" ng-click="open()"><i class="fa fa-clock-o"></i></button> 
    </span> 
</p> 

コントローラで：

$scope.open = function (size) { 

var modalInstance = $uibModal.open({ 
    animation: $scope.animationsEnabled, 
    templateUrl: 'myModalContent.html', 
    controller: 'ModalInstanceCtrl', 
    size: size, 
    resolve: { 
    time: function() { 
     return $scope.mytime; 
    } 
    } 
}); 

modalInstance.result.then(function (selectedItem) { 
    $scope.mytime = selectedItem; 
}, function() { 
    $log.info('Modal dismissed at: ' + new Date()); 
}); 

}。ここで

は

は、この情報がお役に立てば幸い例とplunkerです。

Answer 2

コンテンツテンプレートを定義できるディレクティブはpopoverです。