Question

我不知道这个用例是什么（它需要覆盖Angular Material中导致Safari中的错误的一些行为），但这就是我＆＃39我试图这样做：

HTML：

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

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

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

我不能通过ng-style执行此操作，因为Angular Material会从特定元素中删除ng-styles。

是否可以操纵Angular的<style>标签？或者有没有选择来实现这个目标？

Answer 1

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

jsfddle上的实例。

＆＃13;

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);
        });
      },
    }
  });

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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样式。

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

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

2 个答案: