AngularJS - 从控制器更改类的属性答案

【问题标题】：AngularJS - Change properties of a class from a controllerAngularJS - 从控制器更改类的属性
【发布时间】：2016-07-11 16:34:08
【问题描述】：

我不会喋喋不休地谈论这个用例（它需要覆盖 Angular Material 中导致 Safari 出现错误的某些行为），但这是我正在尝试做的事情：

HTML：

<style>
  .changeme{
    height: 300px;
  }
</style>

<div class='changeme'>
  Some Text
</div>

我的 JS 代码查看浏览器窗口的高度，我需要从我的控制器动态更改 .changeme 的 height 属性。

我不能通过ng-style 执行此操作，因为Angular Material 将ng-styles 从相关的特定元素中剥离出来。

是否可以从 Angular 操作 <style> 标签？或者有什么选择可以实现这一目标？

【问题讨论】：

我不认为你可以改变
@SureshKamrushi 该死的。有什么建议吗？
如何创建一个指令，该指令将为height 属性插入另一个带有!important 的<style>？

标签： javascript css angularjs angularjs-scope

【解决方案1】：

如前所述，对于 DOM 操作最好使用指令。

jsfddle 上的实时示例。

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {

  })
  .directive('changeme', function() {
    return {
      restrict: "AC",
      scope: {
        elementHeight: "="
      },
      link: function(scope, elem) {
        scope.$watch('elementHeight', function() {
          elem.css('height', scope.elementHeight);
        });
      },
    }
  });

.changeme {
  height: 300px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">
    Change height:
    <input ng-model="height" /> don't forget px. Example 100px.
    <div class='changeme' element-height="height">
      Some Text
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

首先，您实际上可以使用<style> 标签覆盖Angular Material 样式，但更推荐使用css 文件。

其次，您可以使用 jQuery 为您的 css 值传递动态值。在 jQuery 中，你有函数 css()。您可以将参数名称及其值传递给它。

例如.changeme.css('height', '300px');

您可以查看更多关于css()here的信息。

您必须在控制器中添加该 jQuery 代码。那些您可以传递给它的变量并根据需要对其进行操作。

第三，重要的是要注意导入的 css 文件的顺序。例如，如果您的 Angular Material css 文件导入位于 css 导入文件范围的最底部，那么最底部的文件将覆盖类或 id 的样式（如果它们存在于上述 css 文件中）。这是一个例子：

<link rel="stylesheet" type="text/css" href="base.css">
<link rel="stylesheet" type="text/css" href="angularM.css">

假设base.css 具有名为myClass 的类的名为width 的样式属性，并且假设angularM 文件对于同一属性width 也具有同一类的样式。在这种情况下，angularM 文件的样式将覆盖 base.css 文件 myClass 样式。

希望最后一点的解释不复杂。

【讨论】：