Ich schreibe eine Komponente mit AngularJS- und AngularJS-Direktiven.
Ich mache so etwas:
var MyApp = angular.module('MyApp', []);
MyApp.directive('myTag', function() {
return { /* Some logic here*/ }
});
Ich möchte in der Lage sein, den Stil meiner Komponente (mit CSS) zu ändern, etwa wie folgt:
<my-tag class="MyClass"></my-tag>
Außerdem möchte ich in der Lage sein, alle Elemente innerhalb meiner -Komponente (HTML-Markup innerhalb meines -Tags) zu bearbeiten.
Haben Sie Ratschläge oder nützliche Beispiele, wie Sie die Stileigenschaften von benutzerdefinierten Tags mit AngularJS bearbeiten können?
Das sollte den Trick tun.
var MyApp = angular.module('MyApp', []);
MyApp.directive('myTag', function() {
return {
link: function(scope, element, attributes){
element.addClass('MyClass');
}
}
});
So fügt AngularJS die wichtigsten CSS-Stile hinzu:
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>');
Sie finden diesen Code in angle.js v1.2.0-rc.2.
In einer benutzerdefinierten Anweisung verwende ich diese Lösung, um CSS-Stylesheets in der Anweisung zu bündeln:
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>');
Dann können Sie class="ouput-color"
in Ihren Direktive-Vorlagen verwenden.
Ich fand es sehr sauber und nützlich.
Ich bin ein wenig zu spät zur Party, aber warum verwenden Sie nicht alle die integrierte .css () -Methode?
benutz einfach:
link: function(scope, elem, attr, ctrl)
{
elem.css({'display': 'block', 'height': '100%', 'width': '100%'});
}
oder was auch immer Sie wünschen.
Sie können benutzerdefinierte Stile in die Deklaration einer Direktive mit einem Parameter einfügen, genau wie Sie es veranschaulicht haben.
Um einen Stil wie diesen zu deklarieren, müssen Sie eine Variable definieren, die die benutzerdefinierten Stile enthält:
scope: {
myClass: '@myClass'
},
Legen Sie dann diesen Parameter in der Vorlage der Direktive wie folgt fest:
<my-tag my-class="CustomClass"></my-tag>
Verweisen Sie schließlich in der Vorlage der Direktive selbst auf diese Klasse:
<h1 class="{{myClass}}">{{myContent}}</h1>
Ich habe einen Plunker erstellt, der zeigt, wie Sie Stile in einer Direktive anpassen können, siehe hier.
Chcete-li manipulovat se stylem css prostřednictvím directivy atributů, můžete něco takového udělat:
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));
});
}
};
});
Některé 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>
Chcete-li provést směrnici prvku, změňte její vlastní styl, něco takového:
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>'
}
});
Ein HTML:
<div ng-app="colorSwap">
<element-with-style>123</element-with-style>
</div>
Doufám, že zu pomůže. Zbytek odpovědí pokrývá třídní manipulaci víceméně.
Zur CSS-Manipulation innerhalb der childs Ihrer Direktive versuchen Sie Folgendes:
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';
}
}
}
});
Hier ist ein Beispiel, bitte beachten Sie, dass dies wahrscheinlich nicht die beste Verwendung von AngularJS ist. Da deklarativ ist, möchten Sie wahrscheinlich nur die Klassen in das Markup einbinden. Damit Sie verstehen, was los ist, möchte ich Ihnen eine einfache Anweisung aufzeigen, die das tut, was Sie zuerst gefragt haben.
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);
}
};
});
Zum Schluss fügen Sie dies in Ihr Markup ein:
<my-tag />
Winkel
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>
Ich habe noch nicht die perfekte Lösung gefunden, aber ich folge John Papas Styling von Controllern auch mit Anweisungen:
Ich fand es sehr sauber und folgt einem Muster. Die schlechte Seite ist, dass Sie mehrere <link>
-Tags in der Nähe der Direktiven im gerenderten HTML-Code erstellen (dies scheint jedoch noch kein Problem zu sein). Check out diesen Kommentar auch.
Sehen Sie sich dazu die Komponenten Angular 1.5 an. Es ist relativ neu und hat einen viel besseren Ansatz. Jetzt verwende ich Direktiven nur für die DOM-Manipulation (nicht als Komponenten für die Wiederverwendbarkeit).