AngularJS使用ng-style动态设置margin-left遇阻，求正确实现方式

首先得说，你原来的ng-style写法完全不符合AngularJS的语法规范，咱们先把问题拆解清楚，再一步步解决。

为什么你的写法不对？ #

ng-style要求接收一个键为CSS属性名、值为对应样式值的对象，而不是把条件和样式字符串混在一起写。你原来的代码把条件判断和样式结构搞混了，所以肯定不会生效。

最优解决方案：用CSS直接实现（推荐） #

既然你已经给div加了col-xs-12、col-lg-8这些Bootstrap栅格类，直接用CSS选择器来设置margin-left是最简洁、最符合前端最佳实践的方式，完全不需要用到ng-style：

/* 给col-xs-12的元素设置左外边距 */
.col-xs-12 {
  margin-left: 120px;
}

/* 给col-lg-8、col-md-8、col-sm-8的元素统一设置左外边距 */
.col-lg-8, .col-md-8, .col-sm-8 {
  margin-left: 400px;
}

这种方式既维护简单，又符合关注点分离的原则，样式逻辑完全放在CSS里，不用和JS代码耦合。

如果一定要用ng-style实现 #

如果你因为某些原因必须用ng-style来动态控制，那可以通过控制器函数来返回样式对象，这样逻辑更清晰：

1. 在HTML模板里调用控制器的函数：

<div class="col-xs-12 col-lg-8 col-md-8 col-sm-8" ng-style="getMarginStyle($element)"></div>

2. 在对应的AngularJS控制器里定义这个函数：

$scope.getMarginStyle = function(element) {
  // 获取元素的所有类名
  const classList = element[0].classList;
  
  // 判断元素是否包含col-xs-12类
  if (classList.contains('col-xs-12')) {
    return { 'margin-left': '120px' };
  }
  // 判断是否包含其他三个类中的任意一个
  else if (classList.contains('col-lg-8') || classList.contains('col-md-8') || classList.contains('col-sm-8')) {
    return { 'margin-left': '400px' };
  }
  // 默认返回空对象，不设置额外样式
  return {};
};

或者，如果你是通过ng-class来动态绑定这些类的（比如用一个scope变量控制），那可以直接根据变量来判断，不用操作DOM：

<div ng-class="columnClass" ng-style="{ 'margin-left': columnClass === 'col-xs-12' ? '120px' : '400px' }"></div>

这里的columnClass是你在控制器里定义的变量，用来控制div的类名。

总结 #

优先推荐用CSS方案，简单高效；如果必须用ng-style，控制器函数的方式更易维护，也符合AngularJS的语法规范。

内容的提问来源于stack exchange，提问作者Shashwat Tyagi