html - Angular 模态内的 ng-scrollbar

Question

我在 angular modal 中实现 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

这个问题的根本原因是，scrollbar rebuild:me 应该在模态对话框完成打开后调用，所以 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');
    });

});
};