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

Question

我是棱角分明的新手:-)我只是想将一个div的尺寸设置为另一个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的一个基本准则是,您应该避免在控制器中处理DOM元素(如div),而是在指令中执行与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
      };
}); 

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

接下来我们要将这个样式应用到我们可以实现的另一个元素:

 <span master class="a">{{content}}</span>
 <div class="b" ng-style="style"></div>

你可以看到上面的跨度是div中我们的主要元素是我们的"奴隶",它总是具有与它的主人相同的宽度和高度. ng-style="style"意味着我们将名为style的范围变量中包含的css样式添加到span.

我希望你能理解我为什么以及如何使用这个解决方案,这里有一个带有演示的plnkr,显示我的解决方案.