我有兩個HTML元素和我想要一個的大小綁定到另一個像的大小:角:是有可能的屬性值綁定到其他HTML屬性
<div id="elem1"> </div>
<div style="height:some binding expression to the height of elem1;
width:another binding expression to width of elem1"></div>
這甚至可能嗎?綁定只需要發生一次。
我有兩個HTML元素和我想要一個的大小綁定到另一個像的大小:角:是有可能的屬性值綁定到其他HTML屬性
<div id="elem1"> </div>
<div style="height:some binding expression to the height of elem1;
width:another binding expression to width of elem1"></div>
這甚至可能嗎?綁定只需要發生一次。
在第二個元素上使用ng樣式指令。您可以通過對象形式在元素上設置樣式,並在值更改時自動更新。
在頁面加載,計算elem1
的高度,將其設置爲一個範圍變量,讓說:
$scope.elemStyle = {
height: calculated_elem1_height
}
那麼你的第二個元素 <div ng-style="elemStyle"></div>
每次更新變量$scope.elemStyle
中, DOM將被更新。
編輯
calculated_elem1_height
需要是一個字符串,例如: 「100像素」
$超時將確保DOM加載
var test = angular.module("myApp", []);
test.directive('equalTo', function($timeout) {
return function(scope, element, attrs) {
$timeout(function() {
var e = angular.element(document.querySelector(attrs['element']))[0]
element.css("width", e.offsetWidth + "px")
element.css("height", e.offsetHeight + "px")
}, 0);
};
});
#elem1 {
background: red;
display: inline-block;
width: 200px;
height: 150px;
}
#elem2 {
background: black;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div id="elem1"> </div>
<div id="elem2" equal-to element="#elem1"></div>
</body>
待辦事項他們總是需要相等(頁面大小調整,等)或簡單地在頁面加載? –
@AndrewDonovan只是頁面加載 –