在angularjs中設置一個div的高度到另一個div

Question

我是新角度:-)我只是想設置一個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的一個基本原則是，你應該避免在你的控制器中處理div元素之類的DOM元素，而是在指令中完成與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 
     }; 
}); 

現在，我們的範圍可變樣式應該包含與我們的「主」元件的電流的寬度和高度的物體即使我們主元件的大小變化。

接下來，我們要應用這種風格到另一個元素，我們可以實現像這樣：

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

正如你所看到的跨度上面是我們在div主元素是我們的「奴隸」，這將始終具有與主人相同的寬度和高度。 ng-style="style"意味着我們將包含在我們的作用域變量scope中的css樣式添加到span中。

我希望你能理解我爲什麼以及如何得到這個解決方案，here is a plnkr，演示了我的解決方案。

Answer 2

下面是將其他元素寬度應用於當前元素的示例。

寬度有類名稱的元素的「容器」將適用於使用flexibleCss角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' 
      }); 
      }; 
    });