4
我有一個角度綁帶datepicker放置字段的問題。 有沒有辦法使動態佈局屬性動態變化，以便它不與窗口高度重疊[bottom，top]。Angular-strap datepicker的動態放置
這是ng-repeat中的指令。
我們用這種方法得到的placement屬性是一個空字符串，因爲placment屬性沒有雙向綁定。
<div class="time_status_container"
ng-right-click="calculatePosition($event)"
ng-blur="toggleDatepicker()"
tabindex="-1"
style="outline:none;">
<div bs-datepicker
template="template.html"
container="body"
ng-model="start_date"
data-trigger="manual"
bs-show="show"
placement="{{showDatePicker.position}}"
data-max-date="{{ project.end_date }}">
</div>
Show Datepicker
</div>
我用這個指令觸發datepicker。
directives
.directive('ngRightClick', ["$parse", function($parse) {
return function(scope, element, attrs) {
var fn = $parse(attrs.ngRightClick);
element.bind('contextmenu', function(event) {
scope.$apply(function() {
event.preventDefault();
fn(scope, {$event:event});
});
});
};
}]);
這是指令應該在哪裏動態改變。
directives
.directive('stone', function() {
return {
restrict: 'E',
replace:true,
templateUrl: 'template.html',
controller:function($scope){
$scope.toggleDatepicker = function(type){
if(type == "start"){
$scope.showDatePicker['start'] = true;
$scope.showDatePicker['end'] = false;
}
else if(type == "end"){
$scope.showDatePicker['start'] = false;
$scope.showDatePicker['end'] = true;
}
else{
$scope.showDatePicker['start'] = false;
$scope.showDatePicker['end'] = false;
}
console.log($scope.showDatePicker)
};
$scope.calculatePosition = function(e){
var mouseTopPosition = e.clientY || e.pageY;
var lastKnowWindowHeight = $scope.getLastKnownWindowHeight();
var datePickerStoneHeight = $scope.getDatePickerStoneHeight;
var position;
if((mouseTopPosition + datePickerStoneHeight) > lastKnowWindowHeight){
position = "top";
}
else{
position = "bottom";
}
$scope.showDatePicker = { start:true,position:position };
};
}
};
});