2017.07.28 10:29

간단 사용자 지시자(custom directive) 만들기


<!DOCTYPE html>

<html ng-app="web">

<head>

  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>

  <link rel="stylesheet" href="style.css" />

  <script src="script.js"></script>

  <script src="directives.js"></script>

</head>


<body ng-controller="WebController">

   <!--angular에서 카멜케이스로 지정하지만 여기서는 '-'으로 구분 -->

  <div>

    <my-title />

  </div>


  <ul ng-repeat="Fruit in Fruits">

    <my-item />

  </ul>

</body>

</html>


script.js

(function() {

  var app = angular.module('web', []);


  app.controller("WebController", ["$scope", function($scope) {

    $scope.Fruits = ['Apple', 'Orange', 'Cherry'];

    $scope.Title = "TEST";

  }])

})();


directives.js

// 지시자 이름을 카멜케이스로 한다.

angular.module('web').directive('myTitle', function() {

  return {

    template: '<h1>테스트</h1>'

  }

});


angular.module('web').directive('myItem', function() {

  return {

    templateUrl: 'item.tmpl.html'

  }

});


item.template.html

<li>{{Fruit}}</li>



샘플

Posted by CoolDragon

댓글을 달아 주세요

2017.07.27 17:03

클릭에 대한 핸들러 연결


<tag ng-click="controller명.함수()"/>


예제

<button ng-click="controller.delete()">삭제</button>




Posted by CoolDragon

댓글을 달아 주세요

2017.07.27 16:15

바인딩될 데이터를 필터 지시어에 맞게 데이터 포맷을 변경

용법

<tag>{{ expression | filter:argument1:argument2:... | filter | ...}}</tag>


index.html

<!DOCTYPE html>

<html ng-app="web">


<head>

  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>

  <link rel="stylesheet" href="style.css" />

  <script src="controller.js"></script>

</head>


<body ng-controller="WebController">

  <h1>student info</h1>

  

  <ul ng-repeat="Student in Students">

    <li><input type="text" ng-model="Student.Name"/></li>

    <li>Grade: {{Student.Grade}}</li>

    <li>Gender: {{Student.Gender}}</li>

    <li>Create: {{Student.Create | date:"yyyy-MM-dd HH:mm:ss"}}</li>

  </ul>

</body>


</html>


// controller.js

// Code goes here


(function() {

  var app = angular.module('web', []);

  

  app.controller("WebController", ["$scope", function($scope) {

    $scope.Students = [

      {Name: "Tom", Grade: 8, Gender: "Male", Create: Date.now()}, 

      {Name: "Alice", Grade: 10, Gender: "Female", Create: Date.now()}, 

      {Name: "Ann", Grade: 7, Gender: "Female", Create: Date.now()}, 

      {Name: "Brown", Grade: 8, Gender: "Male", Create: Date.now()}, 

    ]

  }])

})();


샘플

참고: https://docs.angularjs.org/guide/filter

Posted by CoolDragon

댓글을 달아 주세요