Question

我有两个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>

这甚至可能吗？绑定只需要发生一次。

Answer 1

在第二个元素上使用 ng-style 指令。您可以通过对象表单在元素上设置样式，并在值更改时自动更新。

在页面加载时，计算elem1的高度并将其设置为范围变量，让我们说：

$scope.elemStyle = {
    height: calculated_elem1_height
}

然后你的第二个元素 <div ng-style="elemStyle"></div>

每次更新变量$scope.elemStyle时，DOM都会更新。

<强> 修改

calculated_elem1_height需要是一个字符串，例如：“100px”

Answer 2

$ timeout将确保加载DOM

＆＃13;

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);
  };

});

＆＃13;

#elem1 {
  background: red;
  display: inline-block;
  width: 200px;
  height: 150px;
}
#elem2 {
  background: black;
  display: inline-block;
}

＆＃13;

<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>

＆＃13;

Angular：是否可以将属性的值绑定到其他html属性

2 个答案: