So verwenden Sie benutzerdefinierte Angularjs-Anweisungen in Projekten

Dieses Mal zeige ich Ihnen, wie Sie benutzerdefinierte Angularjs-Anweisungen in Projekten verwenden und welche Vorsichtsmaßnahmen für die Verwendung benutzerdefinierter Angularjs-Anweisungen in Projekten gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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: `
      e1f5a1ee9c6dca37bcd669731a393538
        点击按钮调用父级的方法
      65281c5ac262bf6d81768915a4a77ac0
      
      4274db3893f1db7d5323331011e4e7a9
      ff6d136ddc5fdfeffaf53ff6ee95f185
        25edfb22a4f469ecb59f1190150159c6fromName={{newfromname}}bed06894275b65c1ab86501b08a632eb
        25edfb22a4f469ecb59f1190150159c6这是从父级获取到的{{_userDataName}}bed06894275b65c1ab86501b08a632eb
      929d1f5ca49e04fdcb27f9465b944689`,
       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:

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

Vergessen Sie nicht, ihn im HTML-Code zu verwenden:

Kopieren Sie den Code Der Code lautet wie folgt:

8a0e56001b6e94d80e1c4b90adc6623e6fb279ad3fd4344cbdd93aac6ad173ac

[require]

Fordern Sie einen anderen Controller an und übergeben Sie ihn als vierten Parameter der Link-Methode Aufmerksamkeit gilt der Methode zum Auffinden des Controllers.

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 Filterfunktion möchten wir manchmal, dass die Seite die Daten nach einer Art Übersetzung anzeigt, um die Vereinbarung zu erleichtern. Für die Datenbank ist jedoch 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) {//model到view的数据格式化})；
2.ctrl.$parsers.unshift(function(input) {//view到model的数据格式化})。

Die oben genannten $formatter und $parser sind zwei Eine Warteschlange, Von Ansicht zu Modell und von Modell zu Ansicht wird das Filtern durch die darin definierten Methoden erleichtert, was einem Pipeline-Fluss ähnelt und schließlich zum Ziel fließt.

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. Lösen Sie das Verhalten des Synchronisierungswerts mit viewValue und modelValue direkt manuell aus:

ctrl.$setViewValue($scope.info)。

Fünf: Ein paar fragmentarische Techniken

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 angepasst werden

2. Legen Sie einen durch die Überwachung angegebenen Modellwert fest, und natürlich gibt es Methoden wie Überwachungssammlungen:

$scope.$watch(attrs['ngModel'], function(newValue, oldValue) {});

3. Manchmal im Befehl Die neu hinzugefügte Zeichenfolge muss von AngularJS verwaltet werden, daher können Sie die folgende Methode zum Kompilieren verwenden:

$compile(newHtml)($scope)。

Ich glaube, Sie haben die Methode nach dem Lesen beherrscht Der Fall in diesem Artikel finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Detaillierte Erläuterung der von Vue berechneten Eigenschaften und praktischer Listener-Projekte

Wie man Klassen in JS+ verwendet TypeScript Zur Verwendung von

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