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

AngularJS - Change properties of a class from a controller

本文关键字：属性 控制器 AngularJS-      更新时间：2023-09-26

我不会详细讨论这个用例（需要覆盖Angular Material中的一些行为，这会导致Safari中的错误），但我要做的是：

HTML:

<style>
  .changeme{
    height: 300px;
  }
</style>
<div class='changeme'>
  Some Text
</div>

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

我不能通过ng-style执行此操作，因为Angular Material会将ng样式从所讨论的特定元素中剥离。

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

如前所述，对于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>

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

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

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

您可以在此处查看有关css()的更多信息。

您必须在控制器中添加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样式。

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

相关文章：