使用AngularJS創建動態彈出窗口模式

我正在嘗試創建一個服務來管理將在我的應用程序中使用的所有不同彈出窗口模式。到目前爲止，除了每次進入視圖時都能夠更新屏幕上模態的位置，所有的操作都很順利。使用AngularJS創建動態彈出窗口模式

這裏是我的修訂指令

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-包括填充祝成模態的任何模板，然後我用$watch檢查時ngShow變量被翻轉。問題是，我elem DOM元素是不是在當時的DOM，所以outerHeight()和outerWidth()函數返回0

來源

2014-09-24 Matt Hintzke

當你說它不在DOM中 - 它實際上是完全斷開的還是它是「display：none」？ – 2014-09-24 22:58:52

對不起，我猜這是在DOM中。它只是'display：none;'..我能夠解決這個問題，而不是使用ng-hide/ng-show，我只是簡單地將左邊和頂端的值更改爲-9999。這種方式元素總是在DOM – 2014-09-24 23:08:18

沒有jQuery的你應該使用angular.element，

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

你會產生相同的結果

Angular.element不支持outerHeight（）和高度（）;）

來源

2014-09-24 22:30:47 DeadCalimero

它確實支持它，如果我的項目中包含了jQuery，儘管..我能夠讓錯誤消失，但問題是元素不在DOM中'watch'事件的時間，所以'elem.outerHeight（）= 0' – 2014-09-24 22:32:18

另一種方法是在考慮屏幕大小的情況下定義三種預先記錄的大小。（小，中，大）使用CSS寬度爲.media.media的小型媒體查詢適用於您的模式。 – DeadCalimero 2014-09-24 22:38:17

我從你的意見，你有一個大的偏移固定您的問題看。

如果您需要不同的解決方案，您也可以在進行測量之前嘗試刪除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 }); 
    } 
});

來源

2014-09-24 23:14:46

使用AngularJS創建動態彈出窗口模式

回答

相關問題