블로그 이미지
플로거
Android/J2EE/Web/Spring/Database

calendar

          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

Notice

Statistics Graph

'directive'에 해당되는 글 1

  1. 2018.12.31 [앵귤러] Componets, Directives, Localization Example
2018.12.31 23:00 Programming/Angular

Directives

Directives are a unique and powerful feature available in AngularJS. Directives let you invent new HTML syntax, specific to your application.

Reusable Components

We use directives to create reusable components. A component allows you to hide complex DOM structure, CSS, and behavior. This lets you focus either on what the application does or how the application looks separately.

Localization

An important part of serious apps is localization. AngularJS's locale aware filters and stemming directives give you building blocks to make your application available in all locales.

[index.html]

  1. <!doctype html>
  2. <html ng-app="app">
  3. <head>
  4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
  5. <script src="components.js"></script>
  6. <script src="app.js"></script>
  7. </head>
  8. <body>
  9. <tabs>
  10. <pane title="Localization">
  11. <span>Date: {{ '2012-04-01' | date:'fullDate' }}</span><br>
  12. <span>Currency: {{ 123456 | currency }}</span><br>
  13. <span>Number: {{ 98765.4321 | number }}</span><br>
  14. </pane>
  15. <pane title="Pluralization">
  16. <div ng-controller="BeerCounter">
  17. <div ng-repeat="beerCount in beers">
  18. <ng-pluralize count="beerCount" when="beerForms"></ng-pluralize>
  19. </div>
  20. </div>
  21. </pane>
  22. </tabs>
  23. </body>
  24. </html>

[components.js]

  1. angular.module('components', [])
  2.  
  3. .directive('tabs', function() {
  4. return {
  5. restrict: 'E',
  6. transclude: true,
  7. scope: {},
  8. controller: function($scope, $element) {
  9. var panes = $scope.panes = [];
  10.  
  11. $scope.select = function(pane) {
  12. angular.forEach(panes, function(pane) {
  13. pane.selected = false;
  14. });
  15. pane.selected = true;
  16. }
  17.  
  18. this.addPane = function(pane) {
  19. if (panes.length == 0) $scope.select(pane);
  20. panes.push(pane);
  21. }
  22. },
  23. template:
  24. '<div class="tabbable">' +
  25. '<ul class="nav nav-tabs">' +
  26. '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
  27. '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
  28. '</li>' +
  29. '</ul>' +
  30. '<div class="tab-content" ng-transclude></div>' +
  31. '</div>',
  32. replace: true
  33. };
  34. })
  35.  
  36. .directive('pane', function() {
  37. return {
  38. require: '^tabs',
  39. restrict: 'E',
  40. transclude: true,
  41. scope: { title: '@' },
  42. link: function(scope, element, attrs, tabsController) {
  43. tabsController.addPane(scope);
  44. },
  45. template:
  46. '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
  47. '</div>',
  48. replace: true
  49. };
  50. })

[app.js]

  1. angular.module('app', ['components'])
  2.  
  3. .controller('BeerCounter', function($scope, $locale) {
  4. $scope.beers = [0, 1, 2, 3, 4, 5, 6];
  5. if ($locale.id == 'en-us') {
  6. $scope.beerForms = {
  7. 0: 'no beers',
  8. one: '{} beer',
  9. other: '{} beers'
  10. };
  11. } else {
  12. $scope.beerForms = {
  13. 0: 'žiadne pivo',
  14. one: '{} pivo',
  15. few: '{} pivá',
  16. other: '{} pív'
  17. };
  18. }
  19. });

출처 - angularjs.com


posted by 훈즈 플로거

댓글을 달아 주세요

prev 1 next