AngularJS đặt vị trí cố định của phần tử dựa trên một phần tử khác

Question

Ứng dụng này có một hình ảnh, điều cần thiết là nền hoặc không gian làm việc. Tôi cần thêm các trường nhập văn bản vào vùng làm việc này cho các tọa độ cụ thể (trên cùng, bên trái, chiều rộng, chiều cao). Các tọa độ này sẽ liên quan đến hình ảnh (trên cùng/bên trái = 0/0). Làm cách nào để tôi định vị các trường/phần tử của mình liên quan đến hình ảnh?

 <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}"/> 

Mã trên hoạt động tuyệt vời để định vị tuyệt đối nhưng không liên quan đến hình ảnh.

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>