Question

我正在尝试将一些元素的样式从较少的文件移动到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），如图所示包含与该类相关的所有较少样式，以便它选择它们起来。如果是这样，任何人都可以建议如何完成该指令，例如，如果我想为三种样式中的每一种设置不同的背景颜色。谢谢你的帮助！

Answer 1

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

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

Answer 2

不知道我是否理解得很好，但我认为这是关于指令和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'}; 
        }
    };
});

如何在角度js中创建一个css指令？

2 个答案: