在angularjs中将一个div的高度设置为另一个div [英] set height of one div to another div in angularjs

问题描述

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

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

并在我添加的控制器中:

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

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

解决方案

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

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

指令允许您将函数绑定到特定的 dom 元素.在这种情况下，您希望将一个函数绑定到您的第一个 div，它会获取元素的高度和宽度并将其公开给另一个元素.我在下面评论了我的代码，以展示我是如何实现这一目标的.

app.directive('master',function() {//声明；标识符masterfunction link(scope, element, attrs) {//我们所处的范围，我们绑定到的元素，该元素的属性scope.$watch(function(){//观察我们元素的任何变化scope.style = {//范围变量样式，与我们的控制器共享height:element[0].offsetHeight+'px',//设置样式中的高度为我们元素的高度width:element[0].offsetWidth+'px'//与宽度相同};});}返回 {限制:'AE'，//描述在这种情况下我们如何将元素分配给我们的指令，例如<div master></divlink: link//链接到我们元素的函数};});

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

接下来我们想将此样式应用到另一个元素，我们可以像这样实现:

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

正如你所看到的，上面的 span 是我们在 div 中的 master 元素是我们的slave"，它总是与它的 master 具有相同的宽度和高度.ng-style="style" 意味着我们将包含在名为 style 的范围变量中的 css 样式添加到 span.

我希望你明白我为什么以及如何得到这个解决方案，这里有一个 plnkr 通过演示展示我的解决方案.

i am new to angular :-) i simply want to set dimensions of one div to another, any help appreciated.

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

and in the controller i have added:

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

and it is returning width and height, but they are not applied

解决方案

I have created a solution for your problem. First I will explain to you what I have done and why I did it this way.

One basic guideline in Angular is, that you should avoid dealing with DOM elements like divs in your controllers and instead do most things related to DOM elements in directives.

Directives allow you to bind functions to specific dom elements. In this case you want to bind a function to your first div, that gets the height and width of your element and exposes it to another element. I have commented my code below to show how I achieved this.

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
      };
}); 

Now our scope variable style should contain an object with the current width and height of our "master" element even if the size of our master element changes.

Next up we want to apply this style to another element which we can achieve like so:

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

As you can see the span above is our master element in the div is our "slave", which will always have the same width and height as it's master. ng-style="style" means that we add the css style contained in our scope variable called style to the span.

I hope you understand why and how I got to this solution, here is a plnkr with a demo displaying my solution in action.

这篇关于在angularjs中将一个div的高度设置为另一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！