使用angularjs中的指令動態管理兩個面板的高度

html頁面中有兩個面板，用min-height設置。我想根據使用僞指令的最高面板的高度動態地將兩個面板的高度等同起來。已與以下指令合作，使用angularjs中的指令動態管理兩個面板的高度

app.directive('setHeightmaster', function ($timeout) { 
return function (scope, element, attrs) { 
    scope.$watch(function() { 

      element.css("min-height", $('#mp').css("height")); 

     }); 
    }); 

app.directive('setHeightpanel', function ($timeout) { 


return function (scope, element, attrs) { 

    scope.$watch(function() { 
     element.css("min-height", $('#hm').css("height")); 

    }); 

}

}）;

在html文件中，我包含了兩個面板部分的指令。

<div class="col-lg-2 col-md-2 col-sm-2 pad-left-3 pad-right-1"> 
    <section class="panel panel-success sideMealPanel" id="hm" set-heightmaster> 
       <div class="panel-heading panel-title"> 
      <span>Meal 
      </span> 
     </div> 
     <div class="panel-body panel-body-height-without-footer pad-0"> 
      <div class="pad-15" ng-include="'..MealtimeDetail.html'"></div> 
     </div> 
    </section> 
</div> 
<div class="col-lg-10 col-md-10 col-sm-10 pad-left-1 pad-right-0 page-table"> 
    <section class="panel panel-success" id="mp" set-heightpanel> 
</div>

當一個面板的高度改變，另一面板的高度應動態地設置到第一面板和副一個反之亦然的高度。上面的代碼等同於兩個面板的高度，在兩個面板的內容底部留下空白空間。我想刪除額外的空間，並在不留下底部兩個面板的空間的情況下調整高度。我在哪裏上面的代碼錯了？我該如何解決這個問題？謝謝。

來源

2015-04-20 Neha

我相信你不能這樣做。您的指令只會執行一次或第一次加載內容。所以，當你的內容發生變化時，指令就沒有辦法知道它必須再次發揮它的魔力。

您需要確保代碼在內容再次加載後再次運行。內容更改後，從控制器廣播一個事件，並將其捕獲到指令中，然後重新調整高度。

手錶不適用於CSS屬性。而事件機制運作得更好。

來源

2015-04-20 12:10:38 Paras

使用angularjs中的指令動態管理兩個面板的高度

回答

相關問題