AngularJS カスタム サービスとフィルターの混合使用

Angular では、データを整形するために Filter を使用します。たとえば、プロジェクトでは、背景から取得したデータが直接表示され、ユーザーがその意味を理解できない場合がよくあります。このとき、自分で整形する必要があります。従来の J では、インターフェイスに表示する前にコードの長いリストとさまざまなほのめかしが必要ですが、angular で提供されるフィルターには多くの導入が必要です。

以下では、angularJS カスタム サービスとフィルターの混合使用を紹介します。見てみましょう。

1. カスタム サービス "$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. コントローラーを通じてカスタム サービスを呼び出します

html コード

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

コントローラー コード

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

3. fliter の混合使用

html コード

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

fliter コード

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