我是棱角分明的新人:-)我只是想将一个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';
}
};
它返回宽度和高度,但它们不适用
解决方法
我已经为您的问题创建了一个解决方案.首先,我将向您解释我做了什么以及为什么我这样做.
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带有一个演示我的解决方案的演示.
