Mises à jour bidirectionnelles angulaires JS CSS

Question

Certains éléments HTML dont la position et la taille sont stockées de manière persistante sur le backend sont récupérés lors du chargement de la page. La position et la taille de ces éléments HTML sont également modifiables par l'utilisateur (déplaçable et redimensionnable), chaque fois qu'une telle mise à jour se produit, ces attributs doivent être sauvegardés sur le backend afin qu'ils restent persistants d'une session à l'autre.

Il existe un autre niveau de complication: dans un mode appelé mode "aperçu", les options d'édition utilisateur sont désactivées (c'est-à-dire: les draggables et redimensionnables sont désactivés) et les éléments deviennent réactifs. La réactivité est prise en compte en utilisant des directives angulaires. Donc, la position et la taille sont calculées dynamiquement et la position. Une fois le mode de prévisualisation désactivé, les attributs sont ramenés à ce qu'ils étaient avant le mode de prévisualisation. En cours de prévisualisation, j'utilise actuellement ng-style en mode de prévisualisation, et en mode sans prévisualisation, j'utilise la méthode .css() de jquery pour définir les styles. Cependant, je pense que ce n'est pas la façon la plus propre de le faire. Comment puis-je obtenir une liaison bidirectionnelle de CSS de sorte que dans un état le style est rempli à partir du modèle, et dans l'autre état le modèle est mis à jour avec le CSS calculé à partir du DOM.

tl; dr: Le fichier CSS provient d'un modèle ou est enregistré dans un modèle. J'ai besoin d'une méthode 'get css' et 'set css' sur le même élément HTML, où, selon une condition, seul get ou set est actif à un moment donné.

Answer 1

Peut-être que si vous définissez un div conteneur et mis jquery à fait un changement de classe

<scrpit> 
    if($whateveryouwant) { 
    $(".mode").addClass("preview-mode"); 
    } 

    else { 
    $(".mode").addClass("non-preview-mode"); 
    } 

    </script> 

Votre HTML:

<div class="mode"> 
    ... 
    </div> 

Answer 2

Êtes-vous essayé avec d'autres directives angulaires comme ng-peau, ng- show, ng-class, ... https://docs.angularjs.org/api/ng/directive