我正在使用 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 操作自定义标签的样式属性有任何建议或有用的示例吗？
这应该可以解决问题。
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 中找到此代码。
在自定义指令中，我使用此解决方案在指令中捆绑 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。
您可以将自定义样式放入带有参数的指令声明中，就像您举例说明的那样。
为了声明这样的样式，您必须定义一个变量来保存自定义样式：
scope: {
myClass: '@myClass'
},
然后在指令的模板中设置该参数，如下所示：
<my-tag my-class="CustomClass"></my-tag>
最后，在指令本身的模板中，引用该类：
<h1 class="{{myClass}}">{{myContent}}</h1>
我做了一个 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>
我希望这有帮助。其余的答案或多或少地涵盖了类操作。
对于您的指令子项内部的 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';
}
}
}
});
这是一个示例，请注意这可能不是 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 />
角
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>
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>我还没有找到完美的解决方案，但我遵循John Papa 的控制器样式，即使有指令：
我发现它非常干净并且遵循一种模式。不好的一面是您<link>在呈现的 HTML 中的指令附近创建了几个标签（不过似乎仍然不是问题）。也看看这个评论。
话虽如此，看看Angular 1.5 组件的. 它相对较新，并且有更好的方法。现在我只将指令用于 DOM 操作（而不是作为组件的可重用性）。