如何在Angular中的ng-class中使用内联样式？

Question

我正处于这样一种情况,我希望将内联样式应用于基于我在控制器中定义的标志的DOM元素.这背后的原因是我无法更改视图中使用的现有CSS,也无法扩展它.

也就是说,这是我当前的查看代码:

  <label class="control-label" ng-class="{'margin-left:100px' : is_modal}">Hello</label>

is_modal只是一个标志,我需要时在控制器中切换到true/false.

上面的代码不起作用,我也尝试过:

  <label class="control-label" ng-class="{'style=margin-left:100px' : is_modal}">Hello</label>

但也不起作用.谁知道这是否可能？要定义内联样式？

另一种选择是ng-style,但我似乎无法将我的控制器标志is_modal绑定到ng-style,因为它不允许像ng-class那样询问条件...

谢谢亚历杭德罗

Answer 1

如果您正在寻找内联解决方案,那么此特定解决方案可能适合您:

  <label class="control-label" ng-style="is_modal && {'margin-left': '100px'}">Hello</label>

但如果你想有一组复杂的条件更加一致和维护的解决方案与您的风格追加话,我建议你创建一个你可能在你的地方示波器功能ng-class或ng-style指令.

例如

HTML

<label class="control-label" ng-style="getStyle(is_modal)">Hello</label>

JAVASCRIPT

$scope.getStyle = function(is_modal) {
  if(is_modal) {
    return {
       'margin-left': '100px'
    }
  }
};

见这个例子