it-swarm.com.de

Wie verwende ich "ng-repeat" in der Vorlage einer Anweisung in Angular JS?

Ich bin neu bei Angular JS und versuche, eine benutzerdefinierte Direktive zu erstellen, die wie folgt verwendet wird:

<div linkedlist listcolumns="{{cashAccountsColumns}}"></div>

Corrps. Controller wird sein:

$scope.cashAccountsColumns = [
  {"field": "description", "title": "Description"},
  {"field": "owner", "title":"Owner"},
  {"field": "currentBalance", "title":"Current Balance" }
];

Und der Direktive Code ist:

return {
      restrict : 'EA',
      transclude : false,
      templateUrl : 'html/linkedlist.html',
      scope: {
         listcolumns: "@"
      },
      link : function(scope, element, attrs) {
      }
}

template ist:

<table class="box-table" width="100%">
  <thead>
    <tr>
      <th scope="col" ng-repeat="column in listcolumns">
        {{column.title}}
      </th>
    </tr>
  </thead>
</table>

Aber das funktioniert nicht. Ich bekomme nicht den Wert von column.title auf dem Bildschirm, stattdessen werden zu viele Zeilen zu DOM hinzugefügt:

<th ng-repeat="column in listcolumns" scope="col" class="ng-scope ng-binding"></th>
50
user2401127

Das Übergeben eines gesamten Objekts mit Attribut funktioniert nicht. Sie müssen die bidirektionale Bindung verwenden. Ändern Sie einfach die Bindung von @ in = und ändern Sie den HTML-Code, damit er funktioniert:

Änderungen am Direktionscode :

// ...
scope: {
    listcolumns: "="
},
// ...

Änderungen an template :

  <div linkedlist listcolumns="cashAccountsColumns"></div>
96
Ajay Beniwal

@ AjayBeniwal's Antwort ist richtig, aber ich habe das Gefühl, dass es eine zusätzliche Erklärung braucht. 

Wie aus der Angular-Dokumentation (im Abschnitt "Isolieren des Bereichs einer Richtlinie") hervorgeht, ist die Option scope ein Objekt, das eine Eigenschaft für jede Isolat-Bereichsbindung enthält. Wir verwenden es, um den Geltungsbereich innerhalb einer Direktive vom Außenbereich zu trennen (isolieren), und ordnen den äußeren Gültigkeitsbereich dann dem inneren Geltungsbereich der Direktive zu.

Der Name jeder Eigenschaft des scope-Objekts entspricht der Direktiven isolate scope - Eigenschaft. Im Beispiel der Frage ist die einzige Eigenschaft des scope-Objekts listcolumns. Aus diesem Grund muss auch ein entsprechendes Attribut in der HTML-Datei vorhanden sein, die die Anweisung erstellt:

<div linkedlist listcolumns="cashAccountsColumns"></div>

Der Name der scope-Eigenschaft und das Attribut der Direktive müssen jedoch nicht denselben Namen haben. Wir können diese beiden Werte wie folgt abbilden:

<div linkedlist short-name="cashAccountsColumns"></div>

-

controller: function ($scope) {
    $scope.cashAccountsColumns = 'value';
},
scope: {
     moreDescriptiveName: "=shortName"
},

In Fällen, in denen der Attributname mit dem Wert übereinstimmt, den Sie im Gültigkeitsbereich der Direktive binden möchten, können Sie die folgende Abkürzungssyntax verwenden:

<div linkedlist my-name="cashAccountsColumns"></div>

-

controller: function ($scope) {
    $scope.cashAccountsColumns = 'value';
},
scope: {
     myName: "="
},


Außerdem muss in diesem Beispiel der Wert des Attributs der Direktive einer Eigenschaft des äußeren Bereichs der Direktive entsprechen. Dies liegt daran, dass = in =shortName die bidirektionale Bindung von Attributen vom äußeren Bereich an den Isolatebereich verwendet, wodurch der Wert des Attributs der Direktive als Ausdruck ausgewertet wird. Wie diese Antwort eloquently darauf hinweist, wenn wir stattdessen einen Literal-String übergeben möchten, können wir entweder @ anstelle von = verwenden oder die Isolate-Bereichseigenschaft der Direktive mit doppelten und einfachen Anführungszeichen umrunden:

scope: {
     moreDescriptiveName: "@"
},

OR

<div linkedlist short-name="'cashAccountsColumns'"></div>
0
Zach Posten