javascript - Angular JS CSS 双向更新

Question

有一些 HTML 元素的位置和大小永久存储在后端，并在页面加载时获取。这些 HTML 元素的位置和大小也是用户可编辑的(可拖动和调整大小)，每当发生此类更新时，这些属性都需要保存在后端，以便它们在 session 中保持持久。

还有另一个层次的复杂性，在一种称为“预览”模式的模式中，用户编辑选项被关闭(即:可拖动和可调整大小被禁用)，并且元素变得响应。使用 Angular 指令来处理响应。所以位置和大小都是动态计算和定位的。关闭预览模式后，属性将恢复为预览模式之前的状态。

我目前在预览模式下使用 ng-style，在非预览模式下我使用 jquery 的 .css() 方法来设置样式。

但是我认为这不是最简洁的方法，我如何实现 CSS 的双向绑定(bind)，以便在一种状态下样式从模型填充，而在另​​一种状态下模型更新从 DOM 计算出的 CSS。

长话短说: CSS 要么从模型中填充，要么保存到模型中。我需要在同一个 HTML 元素上使用“get css”和“set css”方法，根据条件，在任何给定时间只有 get 或 set 处于事件状态。

Answer 1

也许如果你设置一个容器 div 并设置 jquery 来改变类

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

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

    </script>

您的 HTML:

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