如何在 angular js 中创建 css 指令？

Question

我正在尝试将多个元素的样式从 less 文件移动到 angular 指令中。我已经创建了指令，但不清楚应该如何完成。

例如，如果我有一个如下所示的 html 文件：

   <div mylessDirective>
       <div class="style1">Hello World</div>
       <div class="style2">Hello World2</div>
       <div class="style3">Hello World3</div>
   <div>

这里我有 3 个 div，具有 3 种不同的样式，样式 1、样式 2 和样式 3。是否可以调用一个指令 (mylessDirective)，如图所示，其中包含与此相关的所有 less 样式 class ，以便它捡起它们。如果是这样，任何人都可以建议应该如何完成该指令，例如，如果我想为三种样式中的每一种设置不同的背景颜色。感谢您的帮助！

Answer 1

不知道我是否理解得很好，但我认为这是解决有关指令和 CSS 样式的一般问题的好方法：

JSFiddle

HTML:

<div ng-app="myApp">
    <div myless-directive>
       <div ng-style="style1">Hello World</div>
       <div ng-style="style2">Hello World2</div>
       <div ng-style="style3">Hello World3</div>
   <div>
</div>

JS:

angular.module('myApp', [])
    .directive('mylessDirective', function () {
    return {
        restrict: 'A',
        link: function (scope, elm, attrs) {
            scope.style1 = {'background-color': 'red'}; 
            scope.style2 = {'background-color': 'green'}; 
            scope.style3 = {'background-color': 'blue'}; 
        }
    };
});

Answer 2

您可以使用 ngClass 指令并构建您自己的样式名称：

<div>
   <div ng-class="style1">Hello World</div>
   <div ng-class="style2">Hello World2</div>
   <div ng-class="style3">Hello World3</div>
<div>

如何在 angular js 中创建 css 指令？

How to create a css directive in angular js?

less

angularjs

angularjs-directive