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。

我希望您了解我为何以及如何使用此解决方案，here is a plnkr并使用演示显示我的解决方案。

Answer 2

以下是将其他元素宽度应用于当前元素的示例。

具有类名＆＃34;容器＆＃34;的元素的宽度。将使用flexibleCss angular js指令

应用于div

<div flexible-width widthof="container">
</div>

myApp.directive('flexibleWidth', function(){

    return function(scope, element, attr) {
            var className = attr.widthof; 
            var classWidth = angular.element(document.querySelectorAll('.'+className)[0])[0].clientWidth;
            element.css({ 
                 width: classWidth+ 'px' 
             });
            };
   });

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

2 个答案: