Question

我在角度模态中实现ng-scrollbar时遇到了麻烦。如果我在普通的html页面中使用ng-scrollbar，那么它可以正常工作。但是，如果在里面的模态窗口中使用它，它就不起作用。我正在使用单独的html模板来加载模态模板。

  $scope.searchModal = function() {
$scope.opts = {
  keyboard: true,
  templateUrl : '/app/view/modal/search_content.html',
  controller : SignUpModalICtrl,
   backdrop: 'static',  //to make the backdrop static
  resolve: {} // empty storage
  };   
  $scope.opts.resolve.item = function() {
      return ({name:$scope.name}); // pass name to Dialog
  }
    var modalInstance = $modal.open($scope.opts); 
    modalInstance.result.then(function(){
    },function(){
      //on cancel button press
    });

}

search_content.html

 <div class="scrollme" ng-scrollbar rebuild-on="rebuild:me">
        <h1>Scroll me down!</h1>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p></p>
    </div>
</div>

结果模态窗口中没有滚动条。

Answer 1

这个问题的根本原因是，滚动条重建：我应该在模态对话框完成打开后调用，所以ng-scrollbar可以计算offsetHeight和scrollHeight

//Please add modal dialog opened to SignUpModalICtrl controller

var SignUpModalICtrl = function ($timeout, $scope, $modalInstance) {

$modalInstance.opened.then(function() {
    $timeout(function() {
        $scope.$broadcast('rebuild:me');
    });

});
};

Answer 2

您可以尝试以下方法，

<modal-dialog show='myData.modalShown' on-close='logClose()'>
<div class="addinfo-section scrollme" ng-scrollbar rebuild-on="rebuild:me">.....</div>
</modal-dialog>


Inside Controller ::
$scope.myData = {
    modalShown: false
}
$scope.toggleModal = function() {
    $scope.myData.modalShown    = !$scope.myData.modalShown;
    $scope.$broadcast('rebuild:me');
};

Answer 3

要在ng对话框的对话框中添加垂直滚动条，您只需将以下样式添加到html模板内的主div。

＆＃13;

<div ng-controller="testController"
     style="overflow-y: auto; max-height:400px;">

</div>

＆＃13;

因此，如果对话框的高度超过400px，则会显示滚动条。

角度模态内的ng-scrollbar

3 个答案: