Question

我正在使用prajwalkman中的AngularJS范围滑块指令。滑块在可见时工作正常，但是当使用ng-show将其嵌入隐藏选项屏幕时，由于使用＆＃34; offsetWidth＆＃34;，DOM操作位不起作用。我在面板中使用这些滑块，默认情况下隐藏在屏幕启动时，但仍然想要初始化滑块，以便指针位于正确的位置，当用户切换面板时，彩色选择栏可见。

wholeBar = element.children()[0].offsetWidth;

隐藏元素时，offsetWidth为0且计算无法正常工作。我认为我需要做的是显示面板，然后运行DOM更新代码，但我还没有弄清楚如何在当前的应用/摘要周期完成后安排它运行。

我创建了一个非常简化的fiddle来显示我的意思 - 当DIV显示代码有效时因为offsetWidth不为0，但是当它被隐藏时，选择栏不会扩展为50％。

Answer 1

正如评论所提到的，一个简单的解决方案是使用一个类将滑块移出视图，有效地隐藏＆＃39;它

Updated fiddle

我通过使隐藏/显示按钮切换变量

来完成此操作

<button ng-init="move=false" ng-click="move=!move">Show/Hide DIV</button>

创建一个类以将元素移出屏幕

.move {
  transform: translate(-9999px, 0);
}

并在我们切换按钮时使用ng-class来应用该类

<div ng-class="{move: move}" my-component>
    <h3>This is my hidden DIV</h3>

    <div style="height:20px; width:100%; background-color:red; zindex=0; ">
        <div style="height:35px; width:15px; background-color:blue; zindex=1; position:absolute"></div>
    </div>
</div>

AngularJS：隐藏面板显示后更新DOM？

1 个答案: