Question

我正在尝试创建一个服务来管理将在我的应用程序中使用的所有不同的弹出模式。到目前为止，一切都进展顺利，除了能够在每次进入视图时更新屏幕上模态的位置。

这是我的 UPDATED 指令

app.directive('skModal', function($window){
   return {
      restrict:'EA',
       link: function(scope, elem, attrs){
           var top, left;

           scope.$watch(attrs.ngShow, function(newVal){
               if(newVal) {
                   top = ($window.innerHeight - elem.outerHeight()) / 2;
                   left = ($window.innerWidth - elem.outerWidth()) / 2;

                   elem.css({ 'top': top, 'left': left });
               }
           });

       }
   } ;
});

我只是使用ng-include将我希望的任何模板填充到模态中，然后使用$watch检查ngShow变量何时被翻转。问题是我的elem DOM元素当时不在DOM中，因此outerHeight()和outerWidth()函数返回0

Answer 1

如果没有jQuery，你应该使用angular.element，

angular.element（元件）.prop（ '的offsetHeight'）;

您将得到相同的结果

Angular.element不支持outerHeight（）和height（）;）

Answer 2

我从您的评论中看到您修复了一个大偏移的问题。

如果您需要其他解决方案，也可以在进行测量之前尝试删除ng-hide。鉴于ngShow刚刚翻转，你可能不需要重新应用它，但如果不这样做，它会破坏动画（如果你正在使用它）。

scope.$watch(attrs.ngShow, function(newVal){
  if(newVal) {
    // remove ng-hide to take the measurement
    angular.element(elem).removeClass('ng-hide');

    top = ($window.innerHeight - elem.outerHeight()) / 2;
    left = ($window.innerWidth - elem.outerWidth()) / 2;

    // optionally re-apply ng-hide here

    elem.css({ 'top': top, 'left': left });
  }
});

使用AngularJS创建动态弹出模式

2 个答案: