it-swarm.com.de

Wie manipuliert man Direktive in AngularJS?

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?

41
Roman Dryndik

Das sollte den Trick tun. 

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

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

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.

15
Andrei

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.

13
Porlune

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.

7
Julian

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

6
wolfdawn

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

        }

      }
    }
});
3
Germando

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 />
2

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>
1
Rajat Sawant

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>

1
Mahesh K

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

0
Z. Khullah