Wie manipuliert Stile von Direktiven in AngularJS?

Lesezeit: 6 Minuten

Benutzer-Avatar
Roman Dryndik

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 so:

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

Außerdem möchte ich in der Lage sein, alle Stilelemente in meiner Komponente zu manipulieren (HTML-Markup innerhalb von my-tag).

Haben Sie Ratschläge oder nützliche Beispiele, wie Sie die Stileigenschaften von benutzerdefinierten Tags mit AngularJS manipulieren können?

  • Ich bin mir nicht sicher, was genau Sie mit dem Ändern von Stilen meinen. Es gibt bereits ng-style und ng-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

Dies sollte den Zweck erfüllen.

var MyApp = angular.module('MyApp', []);

MyApp.directive('myTag', function() {
    return { 
      link: function(scope, element, attributes){
        element.addClass('MyClass');
      }
    }
});

  • Also muss ich einen Klassennamen in meine Direktive einfügen, richtig? Wenn ja, halte ich das für keine gute Lösung…

    – Roman Dryndik

    8. Oktober 2013 um 11:44 Uhr

  • vielleicht ist es das, was Sie suchen docs.angularjs.org/api/ng.directive:ngStyle

    – Ben

    8. Oktober 2013 um 15:56 Uhr

  • 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 🙂

    – Simon_Weaver

    10. Juni 2018 um 2:31 Uhr

Benutzer-Avatar
Andrej

So fügt AngularJS grundlegende 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.

BEARBEITEN

In einer benutzerdefinierten Direktive verwende ich diese Lösung, um CSS-Stylesheets in der Direktive 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 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?

benutz einfach:

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

}

oder welches CSS Sie wünschen.

  • Könnten Sie mir mehr Details geben und vielleicht kann ich Ihnen helfen, herauszufinden, warum es nicht funktioniert? jQlite ist standardmäßig auf Angular verfügbar. Es enthält die .css()-Funktion. docs.angularjs.org/api/ng/function/angular.element api.jquery.com/css

    – Porlune

    22. Juli 2016 um 5:05 Uhr

  • 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

Benutzer-Avatar
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 e6ODi.

Plunker

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:

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>'
  }
});

Und das html:

<div ng-app="colorSwap">
  <element-with-style>123</element-with-style>
</div>

Ich hoffe das hilft. Der Rest der Antworten deckt Klassenmanipulation mehr oder weniger ab.

Benutzer-Avatar
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";

        }

      }
    }
});

Benutzer-Avatar
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

1205530cookie-checkWie manipuliert Stile von Direktiven in AngularJS?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy