如何操作AngularJS中的指令样式?

我正在使用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标记)。

你有什么build议或有用的例子如何操纵使用AngularJS自定义标签的风格属性?

这应该做的伎俩。

 var MyApp = angular.module('MyApp', []); MyApp.directive('myTag', function() { return { link: function(scope, element, attributes){ element.addClass('MyClass'); } } }); 

这就是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中find这个代码。

编辑

在一个自定义指令中,我使用这个解决scheme将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"

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

我晚了一点,但为什么不是所有人都使用内置的.css()方法?

只是使用:

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

或任何你想要的CSS。

您可以使用参数将自定义样式放入指令的声明中,就像您所例示的一样。

为了声明这样的风格,你必须定义一个variables来保存自定义样式:

 scope: { myClass: '@myClass' }, 

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

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

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

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

我做了一个显示如何在指令中自定义样式的debugging器,在这里查看

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> 

我希望这有帮助。 其余的答案或多或less涵盖了课堂操作。

这里有一个例子,请注意,这可能不是AngularJS的最佳使用,声明性的,你可能只想把类放在标记上。 然而,只要你明白发生了什么,让我来演示一个简单的指令来做你第一次问的问题。

 var MyApp = angular.module('MyApp', []); MyApp.directive('myTag', function($compile) { return { restrict: 'E', // this means it will be an element link: function(scope, element, attrs, ctrl) { // First, I included the $compile service because it will be needed // to compile any markup you want to return to the element. // 1. Add the class, as you wanted element.addClass('MyClass'); // 2. Add markup var html = '<div>Hello World</div>'; //Compile it and add it back $compile(html)(scope); element.html(html); } }; }); 

最后,在你的标记,你只是把这个在:

 <my-tag /> 

对于你的指令的孩子里面的css操作,试试这个:

 var MyApp = angular.module('MyApp', []); MyApp.directive('myTag', function() { return { link: function(scope, element, attr){ // For your tag element.addClass('MyClass'); // For elements inside your directive tag var tag_childs = element[0].childNodes; for(var i = 0; i < element[0].childElementCount; i++){ tag_childs[i].style.height = '70px'; } } } }); 
 app.directive('bookslist', function() { return { scope: true, templateUrl: 'templates/bookslist.html', restrict: "E", controller: function($scope){ }, link: function(scope, element, attributes){ element.addClass('customClass'); } } }); 
 .customClass table{ background: tan; } .customClass td{ border: 1px solid #ddd; } 
 <!DOCTYPE html> <html> <head> <link href="app.css" rel="stylesheet"> <script type="text/javascript" src="angular.min.js"></script> <script type="text/javascript" src="app.js"></script> <title>Task</title> </head> <body ng-app="app"> <div ng-controller="myCtrl"> <bookslist></bookslist> </div> </body> </html> 

我还没有find完美的解决scheme,但是我遵循John Papa的控制器样式 ,即使有指令:

  • 该指令是一个文件夹(directiveName.directive)
  • 里面有3个文件:directiveName.directive.js,directiveName.template.html,directiveName.styles.css
  • 声明指令时使用templateUrl。 像往常一样,模板链接到CSS文件

我发现它很干净,遵循一个模式。 不好的一面是,你在呈现的HTML中的指令附近创build了几个<link>标记(尽pipe如此,还没有出现问题)。 看看这个评论了。

这就是说,看看Angular 1.5的组件 。 这是相对较新的,有一个更好的方法。 现在我只使用DOM操作指令(不可重用为组件)。

angular

 app.directive("time",function(){ var directive={}; directive.restrict="A"; directive.link=function(scope,element,attr,ctrl){ element.css({ backgroundColor:'#ead333' }); } var time=new Date().toTimeString(); directive.template=time; return directive; }); 

HTML

 The times is <span time></span>