Dieses Mal werde ich Ihnen eine Zusammenfassung der Techniken zur Verwendung benutzerdefinierter Anweisungen in Angularjs geben. Was sind die Vorsichtsmaßnahmen für die Verwendung benutzerdefinierter Anweisungen in Angularjs? Schauen Sie einmal vorbei.
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 zunächst ü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);
};
}
};
}]);Controllers:
$scope.name = "心叶";
$scope.user = "yelloxing";
$scope.sendMail = function(email){
console.error(email);
}Code kopieren Der Code lautet wie folgt:
3: Datenformatierung zwischen Ansicht und Modell
Ähnlich wie bei der Funktion von 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.Viertens: 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. Die Synchronisierung des Werts mit viewValue und modelValue direkt manuell auslösen: ctrl.$setViewValue($scope.info). Fünf: Ein paar verstreute Fähigkeiten1. 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
Empfohlene Lektüre:
Detaillierte Erläuterung der Schritte zum Erstellen eines Angular-Projekts mit Angular CLI
Detaillierte Erläuterung der zu implementierenden Schritte Huffman-Codierung in Quell-JS
Das obige ist der detaillierte Inhalt vonZusammenfassung der Tipps zur Verwendung benutzerdefinierter Direktiven in Angularjs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
