在angularjs中将一个div的高度设置为另一个div

在angularjs中将一个div的高度设置为另一个div

我已经为您的问题创建了解决方案。首先，我将向您解释我做了什么以及为什么这样做。

Angular中的一项基本准则是，应避免在控制器中处理div等DOM元素，而应在指令中执行与DOM元素有关的大多数 *** 作。

指令允许您将功能绑定到特定的dom元素。在这种情况下，您要将函数绑定到第一个div，该函数将获取元素的高度和宽度，并将其公开给另一个元素。我在下面评论了我的代码以显示我是如何实现的。

app.directive('master',function () { //declaration; identifier master    function link(scope, element, attrs) { //scope we are in, element we are bound to, attrs of that element      scope.$watch(function(){ //watch any changes to our element        scope.style = { //scope variable style, shared with our controller height:element[0].offsetHeight+'px', //set the height in style to our elements height width:element[0].offsetWidth+'px' //same with width          };      });    }      return {        restrict: 'AE', //describes how we can assign an element to our directive in this case like <div master></div        link: link // the function to link to our element      };});

现在，我们的范围变量样式应该包含一个对象，该对象具有“主”元素的当前宽度和高度，即使主元素的大小发生了变化。

接下来，我们希望将此样式应用于另一个我们可以实现的元素，如下所示：

 <span master >{{content}}</span> <div  ng-></div>

如您所见，上面的span是div中的master元素，是我们的“ slave”，其宽度和高度始终与master相同。

ng-

意味着我们将范围变量中包含的css样式（称为样式）添加到范围中。

我希望您理解为什么以及如何获得此解决方案，这是一个带有演示的pnkr，演示了我的解决方案。