如何在AngularJS中操作指令的样式？

Question

我正在使用AngularJS和AngularJS指令编写组件.

我正在做这样的事情:

var MyApp = angular.module('MyApp', []);

MyApp.directive('myTag', function() {
    return { /* Some logic here*/ }
});

我希望能够改变我的组件的样式(使用CSS),如下所示:

<my-tag class="MyClass"></my-tag>

除此之外,我希望能够操作组件内的所有元素样式(my-tag内的HTML标记).

您是否有任何建议或有用的示例如何使用AngularJS操纵自定义标签的样式属性？

Answer 1

这应该可以解决问题.

var MyApp = angular.module('MyApp', []);

MyApp.directive('myTag', function() {
    return { 
      link: function(scope, element, attributes){
        element.addClass('MyClass');
      }
    }
});

Answer 2

这就是AngularJS添加核心CSS样式的方式:

angular.element(document).find('head').prepend('<style type="text/css">@charset "UTF-8";[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\\:form{display:block;}</style>');

您可以在angular.js v1.2.0-rc.2中找到此代码.

编辑

在自定义指令中,我使用此解决方案在指令中捆绑CSS样式表:

  var outputColorCSS = {
    selector: 'span.ouput-color',
    rules: [
        'display: inline-block',
        'height: 1em',
        'width: 5em',
        'background: transparent',
        'border: 3px solid black',
        'text-align: center',
        'font-weight: bold',
        'font-size: 0.8em'
    ]
  };
  var outputColorStyleSheet = outputColorCSS.selector + outputColorCSS.rules.join(';');
  angular.element(document).find('head').prepend('<style type="text/css">' + outputColorStyleSheet + '</style>');

然后,您可以class="ouput-color"在指令模板中使用.

我发现它非常干净和有用.

Answer 3

我参加聚会的时间有点晚了,但为什么你们都没有使用内置的.css()方法？

只需使用:

link: function(scope, elem, attr, ctrl)
{
    elem.css({'display': 'block', 'height': '100%', 'width': '100%'});

}

或者你想要的任何东西.

Answer 4

您可以将自定义样式放在带有参数的指令声明中,就像您举例说明的那样.

为了声明这样的样式,您必须定义一个变量来保存自定义样式:

scope: {
    myClass: '@myClass'
  },

然后在指令的模板中设置该参数,如下所示:

<my-tag my-class="CustomClass"></my-tag>

最后,在指令本身的模板中,引用该类:

<h1 class="{{myClass}}">{{myContent}}</h1>

我制作了一个plunker,展示了如何在指令中自定义样式,请在此处查看 .

Answer 5

Plunker

要通过属性指令操作css样式,您可以执行以下操作:

var app = angular.module('colorSwap', []);

app.directive('styleChanger', function() {
  return {
    'scope': false,
    'link': function(scope, element, attrs) {
      var someFunc = function(data)
      {
        /* does some logic */
        return 'background-color:' + data;
      }
      var newStyle = attrs.styleChanger;
      scope.$watch(newStyle, function (style) {
        if (!style) {
          return ;
        }
        attrs.$set('style', someFunc(style));
      });
    }
  };
});

一些html:

<div ng-app="colorSwap">
  <input type="txt" ng-init="colorName= 'yellow'" ng-model="colorName" />
  <div style-changer="colorName">this is the div content</div>
</div>

要创建一个元素指令,请更改它自己的样式,如下所示:

app.directive('elementWithStyle', function() {
  return {
    'restrict' : 'E',
    'scope': {},
    'controller': function($scope) {
      $scope.someStyle = 'Cyan';
      $scope.someFunc = function() { $scope.someStyle = 'purple' };
    },
    'template': '<div style="background: {{someStyle}}" ng-click="someFunc()"> click me to change colors </div>'
  }
});

和HTML:

<div ng-app="colorSwap">
  <element-with-style>123</element-with-style>
</div>

我希望这有帮助.其余的答案或多或少地涵盖了类操作.