Ağu.20

AngularJS (1.3 / 1.5) Eğitimi: AngularJS ile CSS Kullanımı

AngularjS’de bir örnek yaparak CSS kullanımına bakalım. Örneğimizde metin kutusuna girilen bir renk kodunu alıp, bir yazının zemin rengi yapalım. Yazıya tıklandığında da yazının rengini beyaz yapıp, metin kutusuna atayalım.

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <meta charset="utf-8">
  
   <script>
     var uygulama = angular.module("uygulama",[]);
     uygulama.directive('renkliyazi', function() {
         return {
             restrict: 'E',
             replace: true,
             template: '<p style="background-color:{{renk}}">Bu yazı {{renk}} rengindedir',
             link: function(scope, ele, attr) {
                 ele.bind('click', function() {
                     ele.css('background-color', 'white');
                     scope.$apply(function() {
                            scope.renk = "white";
                     });
                 });
             }
         };
     });
  </script> 
</head>
<body ng-app="uygulama">
  <input type="text" ng-model="renk" placeholder="Renk yazın" />    
  <renkliyazi></renkliyazi>
</body>
</html>

Yazdığımız kodları ve yeni direktifleri inceleyelim…

restrict: ’E’ ile direktifimiz elementlere tanımladık.
replace: true ile de DOM değeri değiştirebilme özelliğini açtık.
template: p style=”background-color:{{renk}}”Bu yazı {{renk}} rengindedir’ ile bir DOM elementi oluşturduk. p etiketi tanımlayıp bunun arkaplan renk özelliğini background-color CSS tanımlamasını kullanarak {{renk}} direktifinden gelen renk kodu ile atayarak yaptık. {{renk}} direktifi de HTML içindeki ng-model=”renk” direktifi olan input elementine bağlıdır.

link için bir fonksiyon oluşturduk. Fonksiyonun parametre değerlerini sırası ile scope, ele, attr olarak verdik. Bu parametre isimlerinin bir önemi olmadığını, sadece sıralamanın doğru olması gerektiğine daha önce değinmiştik.

Fonksiyon içinde ele ile ilgili elementin DOM ismini hedefledik. Yani renkliyazi etiketi.

Bu etikete bind direktifi ile fonksiyon ekledik. Fonksiyonun tetikleme olay yöneticisini de click, yani Mouse ile tıklama olarak belirttik. Fonksiyon içinde de .css metodunu kullanarak ele (yani p, daha doğrusu renkliyazi şeklinde tanımlanmış olan etiketin) etiketinin background-color özelliğine white değerini göndererek yazının tekrar beyaz zeminli yazılmasını sağladık.

$apply direktifi ile de $scope içinde scope.renk tanımlaması ile değişken tanımlamış oluyoruz ve değerini de white veriyoruz. Renk değişkeni bire direktif olduğu için DOM içinde de bind olmuş olacak ve white yazısı cümle içinde ve metin kutusunda görünecek.

Uygulama ilk başladığında:

Renk yazıldığında (örneğin; red, blue, green, pink, silver vs):

Yazıya tıklandığında:

Hatırlamakta fayda var; yapmış olduğumuz bu metot dışında, daha önce kullanmış olduğumuz ng-style direktifini de kullanabilirsiniz. Örneğin;

<p ng-style="{'background-color':'pink'}">PEMBE YAZI</p>

İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum