Wie manipuliert man Direktive in AngularJS?

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.

BEARBEITEN

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.

Plunker

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>

Ich habe noch nicht die perfekte Lösung gefunden, aber ich folge John Papas Styling von Controllern auch mit Anweisungen:

• die Direktive ist ein Ordner (directName.directive)
• 3 Dateien: directName.directive.js, directName.template.html, directName.styles.css
• verwenden Sie templateUrl, wenn Sie die Anweisung deklarieren. Die Vorlage hat wie üblich den Link zur CSS-Datei

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).