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

Question

我是角度新手:-)我只是想将一个div的尺寸设置为另一个，请给予任何帮助。

 <div class="front">
     <img ng-src="{[galery.pages[0].thumbnailUrl]}" >
</div>
<div ng-style="galery.pages[1] ? '' : setBackDimensions(); " ></div>

在控制器中，我添加了：

    $scope.setBackDimensions = function() {
        var imgHeight = $(".front").height;
        var imgWidth = $(".front").width;
        return {
            'width': imgWidth + 'px';
            'height': imgHeight + 'px';
        }
    };

返回宽度和高度，但未应用

Answer 1

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

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 class="a">{{content}}</span>
 <div class="b" ng-style="style"></div>

如您所见，上面的span是div中的master元素，是我们的“ slave”，其宽度和高度始终与master相同。 ng- style="style"意味着我们将范围变量中包含的css样式（称为样式）添加到范围中。

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