2014-10-08 3 views
4

У меня проблема с полем размещения дампинг с угловым ремешком. Есть ли способ сделать атрибут места размещения динамически, чтобы он не перекрывался с высотой окна. [Bottom, top].Динамическое размещение дампинг с угловым ремешком

Это директива внутри ng-repeat.

То, что мы получаем для атрибута места размещения с этим подходом, является пустой строкой, потому что атрибут placment не имеет привязки в 2 направлениях.

<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 }; 
      }; 
     } 
    }; 
}); 

ответ

1

Уверен, сделайте showDatePicker.position функцию, которая определяет правильное значение и возвращает это значение.

Смежные вопросы