AngularJS élément de jeu de position fixe basé sur un autre élément

Cette application prend une image, ce qui est essentiel un arrière-plan ou de l'espace de travail. J'ai besoin d'ajouter des champs de texte de saisie sur cet espace de travail, compte tenu des coordonnées spécifiques (en haut, à gauche, largeur, hauteur). Ces coordonnées serait par rapport à l'image (haut/gauche = 0/0). Comment pourrais-je placer mon champs/éléments par rapport à l'image?

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

Le code ci-dessus fonctionne très bien pour le positionnement absolu mais ce n'est pas par rapport à l'image.

Vous pouvez utiliser ng-classe dynamiquement ajouter/supprimer des classes et il y a également ng de style si vous voulez lier directement à des valeurs de style
Cela fonctionne très bien, j'ai toujours le problème de comment définir ma position par rapport à l'autre élément.
Ne pouvez-vous pas juste envelopper à la fois l'img et de l'entrée de la liste dans un div avec la position relative? Ensuite, la position absolue de l'entrée serait basé sur la div?
J'ai ajouté le code pour l'ensemble de la page de sorte que vous pouvez voir le contexte. En l'enveloppant dans une position relative div n'est pas de faire quoi que ce soit. L'image est à la bonne place, la zone d'entrée, montrant jusqu'à l'extérieur de l'image.
L'image doit remplir le div, et les entrées serait par rapport à la div, par conséquent, par rapport à l'image. Si vous allez le résoudre simplement avec les CSS, je vous suggère de travailler avec du contenu statique (pas angulaire), puis branchez le ng-valeurs de style de votre modèle. Aussi un exemple via le violon ou plnkr serait utile.

OriginalL'auteur Ryan Langton | 2014-04-08

4
```
<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>
```
Juste un peu de heads-up: Il est préférable de ne pas inclure contant valeurs dans ngStyle directive (par exemple,position: 'absolute'). Cela entraîne un supplément d'évaluation par digérer la boucle (et il y a plusieurs de ceux qui vont tout le temps). Depuis, il évalue toujours la même valeur, juste coder en dur dans le style attribut.
Juste un point dans votre réponse. L'attribut de style doivent être communs de style html comme: style="position: absolute"

OriginalL'auteur Ryan Langton

Vous devez vous connecter pour publier un commentaire.