Prerender Angular UI Modal

时间:2016-10-04 19:00:50

标签: angularjs angular-ui-bootstrap angular-ui

我正在使用Anuglar UI Bootstrap模式打开AngularJs的对话框,并且在模态打开时第一次遇到性能损失。当对话框进入视图时,页面上的一些隐藏元素会有明显的卡顿和闪烁。模式打开后的所有后续时间对话框都会顺利显示,没有任何卡顿。

我认为这是由于编译视图的一次性计算开销。有没有办法在我的应用程序的后台预编译模式,以便当用户打开对话框时它已准备就绪。

我正在使用Angular UI Modal服务,如此

$uibModal.open({
    templateUrl:'my-modal.html',
    controller:'MyModalCtrl'
});

我为这个指令尝试了类似的东西,但我需要一些适用于控制器/对话框的东西。

var directive = $compile("<my-directive></my-directive>");
var instance = directive(scope.$new(true));

我使用的是角1.5.8和angular-ui-bootstrap 1.3 此问题出现在所有浏览器以及桌面和移动设备上,但在低功耗硬件(手机,平板电脑)上最为明显

https://embed.plnkr.co/hDM6GrUh8droo988MOox/

1 个答案:

答案 0 :(得分:3)

使用resolve确保在模态打开之前数据已准备就绪。

以下是文档中的示例。

var modalInstance = $uibModal.open({
      animation: $ctrl.animationsEnabled,
      ariaLabelledBy: 'modal-title',
      ariaDescribedBy: 'modal-body',
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      controllerAs: '$ctrl',
      size: size,
      resolve: {
        items: function () {
          return $ctrl.items;
        }
      }
    });

此外,远离模态上的{{}}(如果这是您正在使用的)并使用ng-bind代替。