angularjs - update - dynamic title angular




Verwendung der Symbole '@', '&', '=' und '>' in der Gültigkeitsbereichsbindung der benutzerdefinierten Direktive: AngularJS (4)

Ich habe viel über die Verwendung dieser Symbole bei der Implementierung benutzerdefinierter Anweisungen in AngularJS gelesen, aber das Konzept ist mir immer noch nicht klar. Ich meine, was bedeutet es, wenn ich einen der Bereichswerte in der benutzerdefinierten Direktive verwende?

var mainApp = angular.module("mainApp", []);
mainApp.directive('modalView',function(){
  return{
     restrict:'E',
     scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true
  }
});

Was genau machen wir mit dem Umfang hier?

Ich bin mir auch nicht sicher, ob "scope: '>'" in der offiziellen Dokumentation vorhanden ist oder nicht. Es wurde in meinem Projekt verwendet.

Bearbeiten-1

Die Verwendung von "scope: '>'" war ein Problem in meinem Projekt und wurde behoben.


Die AngularJS-Dokumentation zu Direktiven ist ziemlich gut geschrieben, was die Symbole bedeuten.

Um klar zu sein, kann man nicht einfach haben

scope: '@'

in einer Richtliniendefinition. Sie müssen Eigenschaften haben, für die diese Bindungen gelten, wie in:

scope: {
    myProperty: '@'
}

Ich empfehle Ihnen dringend, die Dokumentation und die Tutorials auf der Website zu lesen. Es gibt viel mehr Informationen, die Sie über isolierte Bereiche und andere Themen wissen müssen.

Hier ist ein direktes Zitat von der oben verlinkten Seite bezüglich der Werte des scope :

Die scope-Eigenschaft kann true, ein Objekt oder ein falscher Wert sein:

  • falsy : Für die Richtlinie wird kein Geltungsbereich geschaffen. Die Direktive verwendet den Geltungsbereich ihrer Eltern.

  • true : Für das Element der Direktive wird ein neuer untergeordneter Bereich erstellt, der prototypisch von seinem übergeordneten Bereich erbt. Wenn mehrere Anweisungen für dasselbe Element einen neuen Bereich anfordern, wird nur ein neuer Bereich erstellt. Die neue Bereichsregel gilt nicht für den Stamm der Vorlage, da der Stamm der Vorlage immer einen neuen Bereich erhält.

  • {...} (ein Objekt-Hash) : Für das Element der Direktive wird ein neuer "Isolate" -Bereich erstellt. Der Bereich "Isolieren" unterscheidet sich vom normalen Bereich darin, dass er nicht prototypisch von seinem übergeordneten Bereich erbt. Dies ist nützlich, wenn Sie wiederverwendbare Komponenten erstellen, die nicht versehentlich Daten im übergeordneten Bereich lesen oder ändern sollen.

Abgerufen am 13.02.2017 von https://code.angularjs.org/1.4.11/docs/api/ng/service/ $ compile # -scope-, lizenziert als CC-by-SA 3.0


In einer AngularJS-Direktive können Sie mit dem Gültigkeitsbereich auf die Daten in den Attributen des Elements zugreifen, auf das die Direktive angewendet wird.

Dies lässt sich am besten anhand eines Beispiels veranschaulichen:

<div my-customer name="Customer XYZ"></div>

und die Richtliniendefinition:

angular.module('myModule', [])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      customerName: '@name'
    },
    controllerAs: 'vm',
    bindToController: true,
    controller: ['$http', function($http) {
      var vm = this;

      vm.doStuff = function(pane) {
        console.log(vm.customerName);
      };
    }],
    link: function(scope, element, attrs) {
      console.log(scope.customerName);
    }
  };
});

Wenn die Eigenschaft scope befindet sich die Direktive im so genannten "isolierten Bereich" -Modus, dh sie kann nicht direkt auf den Bereich des übergeordneten Controllers zugreifen.

In sehr einfachen Worten ist die Bedeutung der Bindungssymbole:

someObject: '=' ( someObject: '=' Datenbindung)

someString: '@' (direkt oder durch Interpolation mit doppelter geschweifter Klammer-Notation übergeben {{}} )

someExpression: '&' (zB hideDialog() )

Diese Informationen befinden sich auf der Dokumentationsseite der AngularJS-Direktive , obwohl sie auf der gesamten Seite verteilt sind.

Das Symbol > ist nicht Bestandteil der Syntax.

< jedoch Teil der AngularJS-Komponentenbindung und bedeutet Einwegbindung.


> ist nicht in der Dokumentation.

< ist für Einwegbindung.

@ binding ist für die Übergabe von Strings. Diese Zeichenfolgen unterstützen {{}} Ausdrücke für interpolierte Werte.

= Bindung ist für die bidirektionale Modellbindung. Das Modell im übergeordneten Bereich ist mit dem Modell im isolierten Bereich der Richtlinie verknüpft.

& binding dient dazu, eine Methode in den Geltungsbereich Ihrer Direktive zu übernehmen, damit sie in Ihrer Direktive aufgerufen werden kann.

Wenn Sie scope: true in der Direktive festlegen, erstellt Angular js einen neuen Geltungsbereich für diese Direktive. Das bedeutet, dass Änderungen, die am Geltungsbereich der Direktive vorgenommen wurden, nicht im übergeordneten Controller wiedergegeben werden.


< Einwegbindung

= bidirektionale Bindung

& Funktionsbindung

@ nur Zeichenfolgen übergeben





angularjs-scope