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

Question

我是 Angular 的新手 :-) 我只是想将一个 div 的尺寸设置为另一个，任何帮助表示赞赏。

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

在 Controller 中我添加了:

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

它正在返回宽度和高度，但它们没有被应用

Answer 1

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

Angular 的一个基本准则是，您应该避免在 Controller 中处理 DOM 元素(如 div)，而是在指令中执行与 DOM 元素相关的大多数事情。

指令允许您将函数绑定(bind)到特定的 dom 元素。在这种情况下，您希望将一个函数绑定(bind)到您的第一个 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 中的主元素，是我们的“从属”，它的宽度和高度始终与它的主元素相同。 ng-style="style"意味着我们将包含在名为 style 的范围变量中的 css 样式添加到 span。

我希望你明白我为什么以及如何得到这个解决方案， here is a plnkr通过演示展示我的解决方案。