修改AngularJS属性BackgroundPrimaryColor重置body的style属性原因咨询

• AngularJS 1.x 针对DOM属性的插值绑定采用全量替换逻辑：你在base.html的<body>标签上直接写了style="background-color: [[ BackgroundPrimaryColor ]]"，当BackgroundPrimaryColor变量触发变更检测时，AngularJS会直接将整个style属性的值替换为插值后的结果，也就是仅包含background-color的样式字符串，你通过原生JS新增的背景图、背景定位等其他样式会被直接覆盖。
• 两种样式修改的生命周期不同：你用原生JS在onload阶段修改style是一次性操作，而AngularJS的绑定是全局持续监听的，只要绑定变量发生变化就会重新赋值style属性，优先级远高于一次性的原生JS修改。
• 额外的不规范写法隐患：你的子模板contact me.html中重复定义了<body>标签，模板继承后会形成非法的嵌套<body>结构，虽不直接触发本次问题，但会增加DOM操作的不可控性。

• 改用AngularJS官方的ng-style指令管理样式：将base.html的body标签修改为<body ng-style="bodyStyles">，控制器中维护$scope.bodyStyles对象，修改背景色时仅更新$scope.bodyStyles.backgroundColor属性，ng-style会做增量样式更新，不会覆盖已存在的其他样式。
• 若无需动态修改背景图，可将背景图相关样式写入独立CSS类，在子模板中给body添加该类，和Angular的动态背景色逻辑互不冲突。
• 避免直接在原生DOM属性上使用Angular插值绑定样式，这种写法本身就不适用于多属性动态修改的场景。

内容的提问来源于stack exchange，提问作者Prateek Gupta