Einige wertvolle Details und Tipps zu benutzerdefinierten Direktiven in Angularjs

In diesem Artikel erfahren Sie hauptsächlich, welche wertvollen Details und Techniken in den benutzerdefinierten angularjs-Anweisungen enthalten sind. Kennen Sie das alles? Wenn Sie es nicht wissen, schauen Sie sich diese an. Schauen wir uns gemeinsam diesen Artikel an

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

Das Folgende ist eine grobe Beschreibung, ich werde einige Details erklären werden später nicht erwähnt.

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]

können zuerst über boolesche Werte sprechen. Dieser Vergleich ist einfach:

1. Wenn er auf true gesetzt ist, bedeutet dies, dass er den übergeordneten Bereich erbt und ein untergeordneter Bereich ist.

2. Wenn er 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:

fbed9b0f6bf1f7e816b9b0d0c213b15694b3e26ee717c64999d7867364b1b4a3

[erforderlich]

Fordern Sie einen anderen Controller an und übergeben Sie ihn dann als vierten Parameter der Link-Methode. Worauf wir achten müssen, ist die Methode zum Finden 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. (Wenn Sie mehr erfahren möchten, besuchen Sie die chinesische PHP-Website AngularJS Development Manual , um mehr zu erfahren.)

[terminal]

Attribut terminal: Wenn wahr, zeigt dies an Die Priorität ist kleiner als die der aktuellen Anweisung. Keine der Anweisung wird ausgeführt, nur diese Anweisung wird ausgeführt.

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 Übereinstimmung zu erleichtern. Für die Datenbank gilt jedoch a Eine einfache Seriennummer kann vorteilhafter sein, daher müssen Sie möglicherweise die folgende Methode im Link verwenden, um diese Funktion zu implementieren:

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

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

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.

Viertens: Probleme bei der Datensynchronisierung anzeigen und modellieren

Manchmal werden die Eingabedaten durch jquery in der Anweisung geändert, aber anglejs weiß es nicht. Zu diesem Zeitpunkt können Sie eine der folgenden Optionen auswählen Methode:

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 direkt und manuell das Verhalten der Wertsynchronisierung mit viewValue und modelValue aus: 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 , können Sie anpassen

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).

Sechs: Häufig verwendete Methoden oder Dienste

Es gibt zwei Möglichkeiten, eine Zeichenfolge zu analysieren (es kann sich um ein Attribut oder eine Methode handeln:

$scope.getInfo=function(){
    console.log('这是执行了函数的表现');
};

var funName="getInfo()";

//执行方法一：
$scope.$eval(funName);
//执行方法二：
$parse(funName)($scope);

Okay Okay, dieser Artikel endet hier (wenn Sie mehr sehen möchten, besuchen Sie die chinesische PHP-Website

AngularJS-Benutzerhandbuch , um mehr zu erfahren. Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen).

Das obige ist der detaillierte Inhalt vonEinige wertvolle Details und Tipps zu benutzerdefinierten Direktiven in Angularjs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!