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有关的操作
}
};
});Nach dem Login kopieren
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);
};
}
};
}]);Nach dem Login kopieren
So schreiben Sie den Befehl:
$scope.name = "心叶";
$scope.user = "yelloxing";
$scope.sendMail = function(email){
console.error(email);
}Nach dem Login kopieren
Vergessen Sie nicht, ihn im HTML-Code zu verwenden:
Kopieren Sie den Code Der Code lautet wie folgt:
< /p>[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的数据格式化})。Nach dem Login kopieren
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");Nach dem Login kopieren
ctrl.$setViewValue($scope.info)。
Nach dem Login kopieren
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) {});Nach dem Login kopieren
$compile(newHtml)($scope)。
Nach dem Login kopieren
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!
