变量值没有传递到函数内部。

I have function, that doesn't work properly for some reason. In my AngularJS app I need to manipulate CSS with jqLite.

我有函数，由于某种原因不能正常工作。在我的AngularJS应用中，我需要使用jqLite来操作CSS。

Let's say there are two div's and first one has certain width.

假设有两个div，第一个有一定宽度。

<div class="primary-item"></div>
<div class="secondary-item"></div>

I want to set secondary item width to be the same as primary.

我要设置第二项宽度与主项相同。

Everything goes fine till the point when function changes CSS. Looks like widthToSet value didn't pass there.

一切都很好，直到函数改变CSS的时候。看起来widthToSet值没有通过。

secondaryItem.css({width: + widthToSet + 'px', height: '100px'});

Please see the code in the snippet below.

请参见下面的代码片段。

function changeCss() {
    var masterItem = angular.element( document.querySelector( '.primary-item' ) );
    var widthToSet = angular.element( masterItem.prop('offsetWidth') );
    alert("width to set is" + widthToSet);
    var secondaryItem = angular.element( document.querySelector('.secondary-item') );
    secondaryItem.css({width: + widthToSet + 'px', height: '100px'}); /*width is not being set*/
    //secondaryItem.css({width: '300px', height: '100px'}); /*works fine*/
}

angular.element(document).ready(function () {
  changeCss();
});

.primary-item {border: 1px solid red; padding: 10px;}
.secondary-item {border: 1px solid green; padding: 10px;}
.primary-item, .secondary-item {float: left; clear: both; margin-bottom: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<div class="primary-item">Some content here</div>
<div class="secondary-item"></div>

Thank you!

谢谢你们！

1 个解决方案

#1

Thanks to @Hacketo for help.

感谢@Hacketo的帮助。

The problem was in declaration of widthToSet variable.

问题在于widthToSet变量的声明。

function changeCss() {
    var masterItem = angular.element( document.querySelector( '.primary-item' ) );
    var widthToSet = masterItem.prop('offsetWidth');
    var secondaryItem = angular.element( document.querySelector('.secondary-item') );
    secondaryItem.css({width: + widthToSet + 'px', height: '100px'}); 
}

angular.element(document).ready(function () {
  changeCss();
});

.primary-item {border: 1px solid red; padding: 10px;}
.secondary-item {border: 1px solid green;}
.primary-item, .secondary-item {float: left; clear: both; margin-bottom: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<div class="primary-item">Some content here</div>
<div class="secondary-item"></div>

#1