Warum wird das überhaupt hochgestuft?? Die Frage stellt nicht die Frage, wie man die Klasse eines Anweisungselements manipuliert.
– dmr07
22. Juli 2016 um 1:05 Uhr
@ dmr07 Ich stimme zu, um den Autor zu ermutigen, seine Frage in Zukunft klarer zu stellen – und da diese Antwort aufgrund seines Titels für mich funktioniert hat 🙂
Dann können Sie verwenden class="ouput-color" in Ihren Weisungsvorlagen.
Ich fand es sehr sauber und nützlich.
Tolle Arbeit, ich musste jedoch Klammern hinzufügen: ... outputColorCSS.selector + '{' + outputColorCSS.rules.join(';') + '}';
– Dunc
10. Februar 2016 um 17:09 Uhr
Nur zur Verdeutlichung: Dieser Code ist reines Javascript, darf nicht in Ihre link() Funktion eingefügt werden, oder a <style> Block wird ergänzt <head> bei jeder Verwendung Ihrer Richtlinie!
– Esteve
26. Februar 2016 um 10:34 Uhr
das brachte mich auf eine idee: wäre es zu schade, dem style-tag eine id hinzuzufügen und zu prüfen, ob sie bereits existiert??
– Bernardo Dal Corno
5. November 2016 um 20:58 Uhr
Ich komme etwas spät zur Party, aber warum benutzt ihr nicht alle die eingebaute .css()-Methode?
Es funktioniert jetzt. Ich hatte eine ng-Bindung für einen Inline-Stil des Elements. Das CSS, das ich während der ersten Verknüpfung hatte, wurde durch diese spätere Bindung überschrieben. Danke für die Antwort.
– dmr07
22. Juli 2016 um 5:08 Uhr
muss sein $(elem[0]).css({...})
– Soldeplata Saketos
19. September 2018 um 12:49 Uhr
@SoldeplataSaketos Ich glaube, Sie irren sich, ich habe es gerade noch einmal überprüft und die Methode “css” befindet sich tatsächlich auf elem, ohne sie in ein jquery-Element einschließen zu müssen. Elem ist bereits ein jquery-lite-Element.
– Porlune
24. September 2018 um 3:32 Uhr
julianisch
Sie können benutzerdefinierte Stile mit einem Parameter in die Deklaration einer Direktive einfügen, genau wie Sie es beispielhaft gezeigt haben.
Um einen solchen Stil zu deklarieren, müssen Sie eine Variable definieren, die die benutzerdefinierten Stile enthält:
scope: {
myClass: '@myClass'
},
Und dann setzen Sie diesen Parameter in der Vorlage der Direktive wie folgt:
<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. sieh es dir hier an .
Um den CSS-Stil über eine Attributdirektive zu manipulieren, könnten Sie etwa so vorgehen:
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));
});
}
};
});
Etwas 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>
Um eine Elementdirektive zu erstellen, ändern Sie ihren eigenen Stil, etwa so:
Ich hoffe das hilft. Der Rest der Antworten deckt Klassenmanipulation mehr oder weniger ab.
Deutscher Blanco
Versuchen Sie Folgendes, um CSS innerhalb der untergeordneten Elemente Ihrer Direktive zu manipulieren:
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";
}
}
}
});
francisco.preller
Hier ist ein Beispiel, bitte beachten Sie, dass dies wahrscheinlich nicht die beste Verwendung von AngularJS ist, da Sie deklarativ sind, möchten Sie wahrscheinlich einfach die Klassen in das Markup einfügen. Damit Sie jedoch verstehen, was vor sich geht, lassen Sie mich eine einfache Anweisung demonstrieren, um das zu tun, was Sie zuerst verlangt 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);
}
};
});
Schließlich fügen Sie in Ihrem Markup einfach Folgendes ein:
<my-tag />
OK. Aber die Fragen sind noch offen – muss ich den Namen “MyClass” meiner benutzerdefinierten Klasse in die Direktivendeklaration einfügen? Das ist keine gute Lösung, ich versuche es zu vermeiden. Wie macht man dasselbe, aber über einen Parameter?
– Roman Dryndik
8. Oktober 2013 um 11:52 Uhr
Sie können den Unterricht immer noch nach draußen verlegen. Direktiven ersetzen Inhalte nur, wenn replace: true deklariert ist.
– francisco.preller
8. Oktober 2013 um 12:21 Uhr
12055300cookie-checkWie manipuliert Stile von Direktiven in AngularJS?yes
Ich bin mir nicht sicher, was genau Sie mit dem Ändern von Stilen meinen. Es gibt bereits
ng-style
undng-class
dafür.– Chandermani
8. Oktober 2013 um 11:53 Uhr
Reden Sie von Stilen oder Klassen? Es gibt einen großen Unterschied. Das Manipulieren von Klassen ist einfach. Stile, nicht so sehr.
– Bennett McElwee
31. März 2014 um 22:13 Uhr