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

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

· 8년 전 · 1483
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>

댓글 작성

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

로그인하기

게시글 목록

번호 제목
1356
1355
1354
1353
1352
1351
1350
1349
1348
1347
1346
1345
1344
1343
1342
1341
1340
1339
1338
1337
1336
1335
1334
1333
1332
1331
1330
1329
1328
1327