So verwenden Sie benutzerdefinierte AngularJS-Anweisungen

Dieses Mal zeige ich Ihnen, wie Sie die benutzerdefinierten Anweisungen von Angularjs verwenden und welche Vorsichtsmaßnahmen für die Verwendung der benutzerdefinierten Anweisungen von Angularjs gelten. Das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf.

1: Häufig verwendete Vorlagen für benutzerdefinierte Anweisungen

Das Folgende ist eine grobe Beschreibung, die nicht vollständig ist. Einige nicht erwähnte Details und wichtige damit verbundene Kenntnisse werden später erläutert 🎜>

angular.module('yelloxingApp', []).directive('uiDirective', function() {
  return {  
    restrict:String,//标明该指令可以在模板中用于元素E、属性A、类C和注释M或组合    
    priority:Number,//设置指令执行优先级，在某个DOM上优先级高的会先执行
        terminal:Boolean,    
    template:String or Template Function,//就是设置模板，和下面的templateUrl属性二个只可以设置一个，目的一样    
    templateUrl:String or Template Function,//除了字符串，这二个属性还可以设置函数    
    replace:Boolean,//指令模板是否替换原来的元素    
    scope:Boolean or Object,
    controller:String or function(scope, element, attrs) { ... },    
    require:String or Array,    
    //你需要知道link在每个实例都执行一遍，compile全程只会执行一遍
    link: function(scope, element, attrs,ctrl) { ... },    
    compile:function(element, attrs) {
      //常用的就是compile的此处写执行一次的代码，或者在link方法里面写和dom有关的操作
    }
  };
});

2: Einige Attributbeschreibungen

[scope]

Lassen Sie uns zuerst über Boolesche Werte sprechen:

1. Wenn es auf true gesetzt ist, bedeutet es, dass der übergeordnete Bereich geerbt wird und es sich um einen untergeordneten Bereich handelt.

2 Wenn es auf false gesetzt ist, wird der übergeordnete Bereich direkt verwendet.

Es gibt eine weitere Objekteinstellungsmethode, die darin besteht, einen isolierten Bereich festzulegen. Bei Verwendung des isolierten Bereichs stehen drei Methoden zur Verfügung, um mit Orten außerhalb der Isolation zu interagieren:

angular.module('yelloxingApp', []).directive("scopeExample", ['$rootScope', function($rootScope) {
  return {
    restrict: 'A',    
    scope: {
      _userDataName: "=userDataName",
      _onSend: "&onSend",
      _fromName: "@fromName"
    },    
    template: `
      <button ng-click="_useParentMethod()">
        点击按钮调用父级的方法
      </button>
      
      <input ng-model="_userDataName"/>
      <ul>
        <li>fromName={{newfromname}}</li>
        <li>这是从父级获取到的{{_userDataName}}</li>
      </ul>`,
       link: function($scope, element, attrs) {
      //使用@符号可将本地作用域的变量与DOM属性的值进行绑定，即这里通过@得到父类fromName的值
      $scope.newfromname = $scope._fromName;
      $scope._useParentMethod = function() {      
        //使用&符号可以在其中调用父类的方法
        $scope._onSend({ "email": { "email": "yelloxing@gmail.com" } });
        console.log($scope._userDataName);        
      };
    }
  };
}]);

So schreiben Sie den Befehl. Werfen wir einen Blick auf den Inhalt des

Controllers:

$scope.name = "心叶";
$scope.user = "yelloxing";
$scope.sendMail = function(email){
  console.error(email);
}

Vergessen Sie nicht, ihn in HTML zu verwenden:

Code kopieren Der Code lautet wie folgt:

[require]

Fordern Sie einen anderen Controller an und übergeben Sie ihn dann als vierten Parameter der Link-Methode. Worauf wir achten müssen, ist die Controller-Methode zu finden.

Die Methode zum Finden eines Controllers kann folgendermaßen verstanden werden: Verwenden? Gibt an, dass, wenn der erforderliche Controller im aktuellen Befehl nicht gefunden wird, null als vierter Parameter an die Link-Funktion übergeben wird. Wenn das Präfix ^ hinzugefügt wird, sucht der Befehl nach dem Controller, der durch den erforderlichen Parameter im angegeben wird Die Upstream-Befehlskette kann auch kombiniert werden, z. B. „?^ngModel“, wenn kein Präfix vorhanden ist gefunden, wird es einen Fehler auslösen.

[Terminal]

Attributterminal: Wenn dies wahr ist, werden Anweisungen mit einer niedrigeren Priorität als die aktuelle Anweisung nicht ausgeführt, sondern nur diese Anweisung.

3: Datenformatierung zwischen Ansicht und Modell

Ähnlich wie bei der Funktion von

Filter möchten wir manchmal, dass auf der Seite Daten angezeigt werden Es wurde übersetzt, um die Vereinbarung zu erleichtern, aber für die Datenbank ist möglicherweise eine einfache Seriennummer vorteilhafter. Daher müssen Sie möglicherweise die folgende Methode im Link verwenden, um diese Funktion zu erreichen:

1.ctrl $ formatters.unshift(function(input) {//Datenformatierung von Modell zu Ansicht});

2.ctrl.$parsers.unshift(function(input) {//Datenformatierung von Ansicht zu Modelländerung} ).

Die oben genannten $formatter und $parser sind zwei Warteschlangen, Ansicht zu Modell und Modell zu Ansicht, die das Filtern durch die darin definierten Methoden erleichtern, ähnlich dem Pipeline-Fluss, und schließlich zum Ziel fließen.

Vergessen Sie nicht, eine Anweisung wie require: „?ngModel“ festzulegen, um den Controller zu finden.

4: Probleme bei der Datensynchronisierung anzeigen und modellieren

Manchmal werden die Eingabedaten durch jquery in der Anweisung geändert, aber AngularJS wird es zu diesem Zeitpunkt nicht wissen Sie können eine der folgenden Methoden wählen:

1. Lösen Sie die Änderung des Eingabefelds aus, lassen Sie Angularjs feststellen, dass sich die Daten geändert haben, und rufen Sie dann $setViewValue(value) auf, um die Daten zu synchronisieren: $(" input").trigger( "change");

2. Das Verhalten der Synchronisierung von Werten mit viewValue und modelValue direkt manuell auslösen: ctrl.$setViewValue($scope.info).

Fünf: Ein paar verstreute Fähigkeiten

1. Setzen Sie true oder false, je nachdem, ob das Eingabefeld zulässig ist: ctrl.$setValidity(errorType, boolean);//errorType stellt die Fehlerkategorie dar und kann sein angepasst

2. Richten Sie einen bestimmten Modellwert für die Überwachung ein, und natürlich gibt es Methoden wie die Überwachung von Sammlungen: $scope.$watch(attrs['ngModel'], function(newValue, oldValue) {} );

3. Manchmal muss die neu hinzugefügte Zeichenfolge in der Anweisung von AngularJS verwaltet werden. Sie können sie mit der folgenden Methode kompilieren: $compile(newHtml)($scope).

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie Angular CLI, um ein Angular-Projekt zu erstellen

So verwenden Sie JS, um Huffman-Codierung zu implementieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie benutzerdefinierte AngularJS-Anweisungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!