AngularJS如何根据另一个元素设置元素的固定位置？

Question

这个应用需要一个图像作为背景或工作区。我需要根据给定的坐标（上、左、宽度、高度），将输入文本字段添加到此工作区中。这些坐标将相对于图像（上/左=0/0）。那么，如何相对于图像定位我的字段/元素呢？

        <img id="background" ng-src="{{page.backgroundImage}}" />
        <input type="text" ng-repeat="field in page.fields" ng-model="field.value" 
               ng-style="{position:'absolute',
                              left:field.left,
                               top:field.top,
                             width:field.width,
                            height:field.height}"/>

上述代码非常适用于绝对定位，但它与图像无关。

- Ryan Langton

---

你可以使用ng-class动态添加/删除类，如果你想直接绑定样式值，也可以使用ng-style。 - Brocco

这个很好用，但我仍然有一个问题，就是如何相对于另一个元素设置我的位置。 - Ryan Langton

你能不能把img和input的list都包裹在一个带有相对定位的div中？这样，输入框的绝对位置就可以基于该div了。 - Brocco

我已添加了整个页面的代码，这样您就可以看到上下文。将其放在相对位置的 div 中并没有做任何事情。图片在正确位置，但输入框出现在图片外面。 - Ryan Langton

图片应填充div，而输入将与div相关，因此与图像相关。如果您只使用CSS来解决它，我建议您先使用静态内容（没有angular）来处理它，然后从模型中插入ng-style值。同时，通过fiddle或plnkr提供示例将会很有帮助。 - Brocco

这实际上很好用，我忘记在position:'relative'周围加引号了.. 谢谢! - Ryan Langton

Answer 1

<div style="position:relative">
    <img id="background" ng-src="{{page.backgroundImage}}" class="course-image" />
    <input type="text" ng-repeat="field in page.fields" ng-model="field.value"
           style="position:absolute"
           ng-style="{left:field.left,
                       top:field.top,
                     width:field.width,
                    height:field.height}" />       
</div>

- Ryan Langton

---

小提示：最好不要在 ngStyle 指令中包含常量值（例如 position: 'absolute'）。这会导致每个脏检查循环都进行额外的评估（而且一直有几个这样的循环在进行）。由于它总是评估为相同的值，因此只需在 style 属性中硬编码即可。 - gkalpak

只是提醒一下，属性style需要是常见的HTML样式，例如：style="position: absolute"。 - Thiago C. S Ventura