如何操作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>
