$摘要沒有足夠的觸發$ watch - AngularJs

我有一個垂直居中元素的$watch函數，因爲我並不總是知道元素的高度和寬度。如果在我的指令中有$timeout函數在$watch函數之前有效，那麼$digest被調用的次數足以調用我的$watch函數，當元素的高度或寬度在頁面最終加載時發生更改時會調用該函數。
但是，如果我從指令中刪除$timeout，則通常不會調用$watch，因爲元素的高度或寬度發生更改時$digest循環未發生。使用$timeout這往往會導致錯誤："10 $digest() iterations reached. Aborting!"

有誰知道另一種方式來觸發$digest週期不固定電腦使用$timeout？或者有什麼方法可以編輯我的$watch函數，以便它能夠正常工作？還是有什麼我可以標記到我的元素，所以它會觸發$digest週期時，它加載？

這裏是我的指令：

angular.module('task2') 
.directive('centerVertical', function ($timeout) { 
    return function (scope, element, attrs) { 
     scope.$watch(function() { 
      $timeout(); 
      return { 
       'h': element[0].offsetHeight 
      }; 
     }, 
     function (newValue, oldValue) { 
      var elementHeight = newValue.h; 

      /*To account for rounding errors and not loop*/ 
      if(elementHeight % 2 === 0) 
      { 
       element.css('margin-top', '-' + ((elementHeight)/2) + 'px'); 
      } 
      else 
      { 
       element.css('margin-top', '-' + ((elementHeight + 1)/2) + 'px'); 
      } 
     }, true); 

     element.bind('centerVertical', function() { 
      scope.$apply(); 
     }); 
    }; 
});

謝謝！

來源

2016-03-02 Techgeekster

我想出了一種不使用$watch的方法，並在DOM加載後更新高度。這很簡單，我之前沒有看到這個，我感到很傻。我希望這可以幫助別人花費數小時試圖做一些像我嘗試的那樣複雜的事情。

angular.module('task2') 
.directive('centerElement', function ($timeout) { 
    return function (scope, element, attrs) { 
     angular.element(document).ready(function() { 
      element.css('margin-top', '-' + (element[0].offsetHeight/2) + 'px'); 
      element.css('margin-left', '-' + (element[0].offsetWidth/2) + 'px'); 
     }); 
    }; 
});

來源

2016-03-02 23:45:01 Techgeekster

$摘要沒有足夠的觸發$ watch - AngularJs

回答

相關問題