테스트 사이트 - 개발 중인 베타 버전입니다

AngularJS Services 필터 내부에서 사용자 지정 서비스 사용

· 8년 전 · 1486
AngularJS Services 필터 내부에서 사용자 지정 서비스 사용


일단 서비스를 생성하고 애플리케이션에 연결하면 컨트롤러, 지시문, 필터 또는 다른 서비스 내부에서 서비스를 사용할 수 있습니다.

필터에서 서비스를 사용하려면 필터를 정의 할 때 서비스를 종속으로 추가하십시오.

hexafy필터에 사용 된 서비스 myFormat:

app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);


<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp">
Convert the number 255, using a custom made service inside a custom made filter:

<h1>{{255 | myFormat}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);

</script>

</body>
</html>


객체 또는 배열의 값을 표시 할 때 필터를 사용할 수 있습니다.

다음과 같은 서비스를 만듭니다 hexafy.

<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>

[전체소스]
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<p>Use a filter when displaying the array [255, 251, 200]:</p>

<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>

<p>This filter uses a service that converts numbers into hexadecimal values.</p>
</div>

<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
app.controller('myCtrl', function($scope) {
$scope.counts = [255, 251, 200];
});
</script>

</body>
</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
1266
1265
1264
1263
1262
1261
1260
1259
1258
1257
1256
jQuery Mobile Button Refresh()
1255
1254
1253
1252
1251
1250
1249
1248
jQuery Mobile Button Widget 1
1247
jQuery Mobile Checkbox 속성
1246
jQuery Mobile Button 속성
1245
jQuery Mobile vmouseup event
1244
jQuery Mobile vmouseover event
1243
jQuery Mobile vmouseout event
1242
jQuery Mobile vmousemove event
1241
jQuery Mobile vmousedown event
1240
jQuery Mobile vmousecancel event
1239
jQuery Mobile vclick event
1238
jQuery Mobile updatelayout event
1237