Angular JS CSS two-way updates

Question

There are some HTML elements whose position and size are stored persistently on the backend, and are fetched when the page loads. These HTML elements' position and size are also user-editable (draggable and resizable), whenever such an update happens these attributes need to be saved on the backend so that they remain persistent across sessions.

There is another level of complication, in one mode called the "preview" mode, the user-editing options is turned off (ie: draggables and resizable are disabled), and the elements become responsive. The responsiveness is taken care using Angular directives. So the position and size are dynamically calculated and position. Once the preview mode is turned off, the attributes are reverted back to what it was before the preview mode.

I currently use ng-style when in preview mode, and in non-preview mode I use jquery's .css() method to set the styles.

However I think this is not the cleanest way to do it, How do I achieve a two-way binding of CSS such that in one state the style is populated from the model, and in the other state the model gets updated with the calculated CSS from the DOM.

tl;dr: The CSS is either populated from a model, or saved to a model. I need a 'get css' and 'set css' method on the same HTML element, where depending on a condition only get or set is active at any given time.

Answer 1

Maybe if you set a container div and set jquery to made a class change

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

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

    </script>

Your HTML:

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

Answer 2

您是否尝试过其他角度指令，例如ng-hide，ng-show，ng-class，... https://docs.angularjs.org/api/ng/directive