Gemischte Verwendung von benutzerdefinierten AngularJS-Diensten und -Filtern

In Angular wird Filter zum Formatieren von Daten verwendet. In Projekten kommt es beispielsweise häufig vor, dass die aus dem Hintergrund entnommenen Daten direkt angezeigt werden und der Benutzer ihre Bedeutung nicht versteht Was die Schnittstelle betrifft, benötigen wir bei traditionellem J eine lange Liste von Codes und verschiedenen Anspielungen, aber die von Angular bereitgestellten Filter erfordern viel Einführung.

Das Folgende ist eine Einführung in die gemischte Verwendung von benutzerdefinierten AngularJS-Diensten und -Filtern. Werfen wir einen Blick darauf.

1. Erstellen Sie einen benutzerdefinierten Dienst „$swl“

var app = angular.module('myApp', []);
app.service("$swl", function() {
this.after = function(data) {
return "("+data + " after,$swl";
};
this.before = function(data) {
return "($swl,before " + data+")";
}
})

2. Rufen Sie den benutzerdefinierten Dienst über den Controller auf

HTML-Code

<div ng-app="myApp" ng-controller="myCtrl">
{{name }}
</div>

Controller-Code

app.controller("myCtrl", function($scope, $swl,$timeout) {
$scope.name = $swl.before("swl");
$timeout(function(){
$scope.name = $swl.after("swl");
},2000)
})

3. Mit gemischter Verwendung von Fliter

HTML-Code

<div ng-app="myApp" ng-controller="myCtrl">
{{name | before}}
</div>

Fliter-Code

app.filter("before",["$swl",function($swl){
return function(data){
return $swl.before("(filter,"+data+")");
}
}])