AngularJS中的動態佈局

角模板非常適合使用，我想知道是否有一種方法可以使用這些模板來實現動態佈局，而無需創建許多指令。例如：AngularJS中的動態佈局

<div id="foo" style="width:100%" /> 

<div style="width:{{ foo.offsetWidth * 0.5}}px" />

這是可能的，如果是這樣，最簡單的方法是什麼？

來源

2014-06-10 ConfusedNoob

我不確定您需要多少條指令，但您可以使用控制器和ng-style來動態更改CSS。我用了一個HP吧，像這樣：

io.on("updateHP", function(data) { 
    $scope.hpBar = {width:((data.hp/data.maxHP)*100)+"%"} 
    $scope.currentHP = data.hp; 
    $scope.maxHP = data.maxHP; 
    $scope.$apply(); 
}); 

<div> 
    HP: <span id="hp" ng-bind-template="{{currentHP}}"></span>/<span id="maxHP" ng-bind-template="{{maxHP}}"></span> 
    <div class="health"> 
     <span ng-style="hpBar"></span> 
    </div> 
</div>

來源

2014-06-10 18:38:34

的ngStyle指令允許您設置CSS樣式的HTML 元素條件。

來源

2014-06-10 18:39:51 Srinath

而且我可以編程獲得另一個元素內聯的寬度？ – ConfusedNoob

是的..你可以從Jason Goemaat製作的小提琴中查看它... http：//jsfiddle.net/jgoemat/3kVmb/2/ – Srinath

ng-style將css樣式綁定到具有相同名稱的對象屬性。你的例子是（fiddle）：

<div ng-style="{width: foo.offsetWidth * 0.5 + 'px'}"/>

來源

2014-06-10 18:41:09

謝謝你的小提琴，但是你正在使用控制器來幫助這裏。這只是一種看法，我寧願在嵌入代碼的標記中這樣做。 – ConfusedNoob

啊，我明白了，你想把它設置爲foo元素寬度的1/2，我假設你剛剛使用了'foo'這個名字兩次。我會留下我的答案，因爲它滿足了這個問題似乎是什麼，但沒有一個沒有直接的方法來做到這一點。你需要編寫一個指令，因爲需要監聽事件大小以改變大小。儘管如此，這並不會太困難。 –

AngularJS中的動態佈局

回答

相關問題