it-swarm.com.de

Angularjs - Argument an Direktive übergeben

Ich frage mich, ob es eine Möglichkeit gibt, ein Argument an eine Direktive zu übergeben?

Was ich tun möchte, ist eine Direktive vom Controller anzufügen:

$scope.title = "title";
$scope.title2 = "title2";

angular.element(document.getElementById('wrapper')).append('<directive_name></directive_name>');

Ist es möglich, gleichzeitig ein Argument zu übergeben, damit der Inhalt meiner Richtlinienvorlage mit dem einen oder anderen Bereich verknüpft werden kann?

hier ist die Direktive:

app.directive("directive_name", function(){
    return {
        restrict:'E',
        transclude:true,
        template:'<div class="title"><h2>{{title}}</h3></div>',
        replace:true
    };
})

Was ist, wenn ich dieselbe Direktive verwenden möchte, aber mit $ scope.title2?

55
SKYnine

So habe ich mein Problem gelöst:

Richtlinie

app.directive("directive_name", function(){
    return {
        restrict: 'E',
        transclude: true,
        template: function(elem, attr){
           return '<div><h2>{{'+attr.scope+'}}</h2></div>';
        },
        replace: true
    };
})

Controller

$scope.building = function(data){
    var chart = angular.element(document.createElement('directive_name'));
    chart.attr('scope', data);
    $compile(chart)($scope);
    angular.element(document.getElementById('wrapper')).append(chart);
  }

Ich kann jetzt verschiedene Geltungsbereiche über dieselbe Anweisung verwenden und sie dynamisch anhängen.

7
SKYnine

Sie können Ihrer benutzerdefinierten Direktive Argumente wie bei den integrierten Angular-Direktiven übergeben, indem Sie ein Attribut für das Direktive-Element angeben:

angular.element(document.getElementById('wrapper'))
       .append('<directive-name title="title2"></directive-name>');

Sie müssen die Variable scope (einschließlich der Argumente/Parameter/Parameter) in der Factory-Funktion Ihrer Direktive definieren. In dem folgenden Beispiel nimmt die Direktive einen title- Parameter an. Sie können es dann zum Beispiel in der template verwenden, indem Sie den normalen Angular-Weg verwenden: {{title}}

app.directive('directiveName', function(){
   return {
      restrict:'E',
      scope: {
         title: '@'
      },
      template:'<div class="title"><h2>{{title}}</h2></div>'
   };
});

Abhängig davon, wie/was Sie binden möchten, haben Sie verschiedene Möglichkeiten:

  • = ist wechselseitig gebunden
  • @ liest einfach den Wert (einseitige Bindung)
  • & wird zum Binden von Funktionen verwendet

In einigen Fällen möchten Sie möglicherweise einen "externen" Namen verwenden, der sich vom "internen" Namen unterscheidet. Mit extern meine ich den Attributnamen auf dem Direktive-Element und mit intern meine ich den Namen der Variablen, die im Geltungsbereich der Direktive verwendet wird. 

Wenn Sie beispielsweise die obige Direktive betrachten, möchten Sie möglicherweise kein weiteres zusätzliches Attribut für den Titel angeben, obwohl Sie intern mit einer title- Eigenschaft arbeiten möchten. Stattdessen möchten Sie Ihre Anweisung wie folgt verwenden:

<directive-name="title2"></directive-name>

Dies kann erreicht werden, indem in der Bereichsdefinition hinter der oben genannten Option ein Name angegeben wird:

scope: {
    title: '@directiveName'
}

Bitte beachten Sie auch folgende Dinge:

  • Die HTML5-Spezifikation besagt, dass benutzerdefinierten Attributen (dies ist im Grunde alles, was in Angular-Anwendungen üblich ist) data- vorangestellt werden sollte. Angular unterstützt dies, indem das Präfix data-- von beliebigen Attributen entfernt wird. In obigem Beispiel könnten Sie also das Attribut für das Element angeben (data-title="title2"), und intern wäre alles gleich.
  • Attribute für Elemente haben immer die Form <div data-my-attribute="..." />, während sie im Code (z. B. Eigenschaften für Bereichsobjekt) myAttribute sind. Ich habe viel Zeit verloren, bevor ich das merkte.
  • Für einen anderen Ansatz zum Austausch von Daten zwischen verschiedenen Angular-Komponenten (Steuerungen, Direktiven) möchten Sie möglicherweise Dienste oder Direktive-Steuerungen betrachten.
  • Weitere Informationen finden Sie auf der Angular-Homepage (Richtlinien)
130
PzYon

Sie können es wie folgt versuchen:

app.directive("directive_name", function(){
return {
    restrict:'E',
    transclude:true,
    template:'<div class="title"><h2>{{title}}</h3></div>',
    scope:{
      accept:"="
    },
    replace:true
  };
})

es stellt eine bidirektionale Bindung zwischen dem Wert des Attributs 'Accept' und dem übergeordneten Bereich her.

Außerdem können Sie die bidirektionale Datenbindung mit der Eigenschaft festlegen: '='

Wenn Sie möchten, dass sowohl Schlüssel als auch Wert an den lokalen Bereich gebunden sind, würden Sie Folgendes tun:

  scope:{
    key:'=',
    value:'='
  },

Weitere Informationen finden Sie unter https://docs.angularjs.org/guide/directive

Wenn Sie also ein Argument von der Steuerung an die Direktive übergeben möchten, verweisen Sie auf dieses Geigeformular

http://jsfiddle.net/jaimem/y85Ft/7/

Ich hoffe es hilft..

6
SDK
<button my-directive="Push">Push to Go</button>

app.directive("myDirective", function() {
    return {
        restrict : "A",
         link: function(scope, Elm, attrs) {
                Elm.bind('click', function(event) {

                    alert("You pressed button: " + event.target.getAttribute('my-directive'));
                });
        }
    };
});

hier ist was ich getan habe

Ich verwende Direktive als HTML-Attribut und übergebe Parameter wie folgt in meiner HTML-Datei. my-directive="Push" Und von der Direktive habe ich es aus dem Mausklick-Ereignisobjekt abgerufen. event.target.getAttribute('my-directive').