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

问题描述

我是新来的角:-)我只是想一格的尺寸设置为另一个，任何帮助AP preciated。

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.

一个基本原则是，你应该避免处理DOM元素，如在控制器的div，而是做好相关的指令DOM元素最多的事。

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.

指令允许你绑定功能，以特定的DOM元素。在这种情况下，你想一个函数绑定到你的第一个div，得到您的元素的高度和宽度，它暴露到另一个元素。我有评论我的code以下，以显示我是如何做到了这一点。

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>

正如你可以看到上面跨度为我们在DIV主元素是我们的奴隶，这将始终具有相同的宽度和高度，因为它的主人。
NG-风格=风格意味着我们添加包含在我们所谓的风格跨度范围变量的CSS样式。

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.

我希望你能明白，为什么我是怎么到这个解决方案，在这里是plnkr与演示显示我的行动方案。

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

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