AngularJS Özel Yönergesi: Şablonlar, Kapsam ve Transclude

AngularJS'de Özel Yönerge (Custom Directive) nedir?

A Özel Yönerge AngularJS'de, kendi yazdığınız davranışlarla HTML'i genişleten, kullanıcı tanımlı bir yönergedir. Bir HTML koduna kaydedilir. modül "Yönerge" fonksiyonunu kullanarak, AngularJS bunu sayfada eşleşen öğe veya özniteliğin göründüğü her yere ekler. AngularJS'in birçok güçlü özelliği olmasına rağmen yerleşik yönergeler kutudan çıktığı gibi, örneğin ng-tekrar, bazen özel yönergeler gerekir.

⚠️ Düzeltme: Orijinal metinde, özel bir yönergenin "kullanıldığı öğeyi değiştirdiği" belirtilmişti. Varsayılan olarak bunu yapmaz: template yerleştirildi içeride Eşleşen eleman. Değiştirme ihtiyaçları replace: trueAngularJS 1.3'ten beri kullanımdan kaldırılmıştır.

⚠️ Destek bildirimi: AngularJS'ye ulaşıldı 31 Aralık 2021 tarihinde yaşamının sonuna ulaştı. ve daha fazla yama veya güvenlik düzeltmesi almaz. Aşağıdaki her şey, mevcut AngularJS 1.x kodunun bakımı için doğru kalır; modern Angular'da bunların karşılıkları bileşenler ve öznitelik yönergeleridir.

Özel bir yönergeye başvurmanın nedeni tekrarlamadır. Aynı işaretleme veya DOM bağlantısı birden fazla ekranda göründüğünde, bir yönerge bunu tek bir adlandırılmış etikete dönüştürür.

Özel Direktif Nasıl Oluşturulur?

Şimdi AngularJS'de özel bir yönerge oluşturmanın bir örneğine bakalım.

Burada kullandığımız özel yönerge, çağrıldığında sayfamıza "Angular JS Eğitimi" metnini içeren bir div etiketi ekleyecektir.

Aşağıdaki açıklamalı ekran görüntüsü, sonrasında açıklanan listenin dört bölümünü numaralandırmaktadır.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <div ng-guru=""></div>

</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.directive('ngGuru',function(){

    return {
        template: '<div>Angular JS Tutorial</div>'
    }
    });

</script>

</body>
</html>

⚠️ Uyarı — bu ilanda kusurlar korunmuştur: Kod, yayınlandığı haliyle birebir kopyalanmıştır. Burada yer alan her örnekte üç hata tekrar tekrar karşımıza çıkmaktadır: chrset="UTF 8" olmalı charset="UTF-8"; angular.js hem de angular.min.js İkisi de yükleniyor, bu yüzden AngularJS iki kez yükleniyor; ve angular-route.js Bağımlı olduğu dosya yüklenmeden önce yüklenir.

Code açıklama

1. İlk önce bir yaratıyoruz modül AngularJS uygulamamız için. Bu, özel bir yönerge oluşturmak için gereklidir çünkü yönerge bu modül kullanılarak oluşturulacaktır.
2. Şimdi "ng" adında özel bir yönerge oluşturuyoruz.Guruve yönergemiz için özel kodu içerecek bir fabrika fonksiyonu tanımlıyoruz.
3. AngularJS tarafından özel yönergeler için tanımlanan bir parametre olan şablon parametresini kullanıyoruz. Bu sayede, bu yönerge her kullanıldığında, şablonun değerini kullanıp çağıran koda enjekte etmeyi tanımlıyoruz.
4. Şimdi özel olarak oluşturduğumuz "ng-guru" yönergesini kullanıyoruz. Bunu yaptığımızda, şablonumuz için tanımladığımız değer, <div>Angular JS Tutorial</div>Şimdi buraya enjekte edilecek.

Yönerge Adlandırma ve Normalleştirme

İsim uyuşmazlığı JavaKodlama ve HTML, çoğu yeni başlayan için kafa karıştırıcıdır. AngularJS normalleştirir Eşleştirmeden önce her öğe ve öznitelik adını kaldırır: gereksiz her şeyi kaldırır. x- or data- öneki, ardından bir adla sınırlandırılmış bir adı dönüştürür. -, : or _ camelCase'e. İşte bu yüzden. ngGuru maçlar ng-guru, ve neden data-ng-guru Bu da işe yarar. CamelCase biçimi gerçek addır; kebab-case ise HTML'de yazılış şeklidir.

⚠️ Düzeltme: Orijinal metinde, özel bir yönerge adının "ng" harfleriyle başlaması gerektiği belirtiliyordu. resmi AngularJS dokümantasyonu Tam tersini tavsiye eder: Kendi talimatlarınızın başına asla şunu eklemeyin: ngYa da gelecekteki yerleşik bir işlevle çakışabilirler. Kendi önekinizi kullanın, örneğin: g99Guru olarak yazılmış g99-guru.

Kod başarıyla yürütülürse, bu çıktı görünür.

Çıktı:

Çıktı açıkça gösteriyor ki, özel bir metin göstermek için tanımlanmış şablona sahip özel ng-guru yönergemiz tarayıcıda görüntüleniyor. Bir sonraki adım, bu şablonun içine yeniden kullanılmaya değer bir şey yerleştirmek.

Yeniden Kullanılabilir Yönergeler Nasıl Oluşturulur?

Özel direktiflerin gücünü zaten gördük, ancak kendi yeniden kullanılabilir direktiflerimizi oluşturarak bunu bir sonraki seviyeye taşıyabiliriz.

Örneğin, kullanıcının "Adı" ve "Yaşı" için bir giriş alanı olan aşağıdaki HTML etiketlerini birden fazla ekranda her zaman gösterecek bir kod eklemek istediğimizi varsayalım.

Bu kod parçasını her seferinde kodlamaya gerek kalmadan birden fazla ekranda yeniden kullanmak için, bu iki kontrolü tutacak bir ana kontrol veya yönerge oluşturuyoruz.

Bu nedenle, artık bu işaretlemeyi her ekranda tekrarlamak yerine, onu bir yönergeye yerleştiriyoruz ve yönergeyi çağırıyoruz. Aşağıdaki ekran görüntüsü, değişen tek satırı işaretlemektedir.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <div ng-guru=""></div>

</div>

<script type="text/javascript">

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

    app.directive('ngGuru',function(){
        return {

            template: '&nbsp;&nbsp;Name <input type="text"><br><br>&nbsp;&nbsp;&nbsp;Age<input type="text">'
        };
    });

</script>

</body>
</html>

Code açıklama

• Özel yönerge için kod parçacığımızda değişen tek şey, şablon parametresine verilen değerdir. Düz bir etiket veya metin satırı yerine, sayfamızda gösterilmesi gereken "Ad" ve "Yaş" için iki giriş denetiminin tamamını içeren bir kod parçası giriyoruz.

👍 Bahşiş: Bu kadar uzun bir şablon kendi dosyasında olmalı. Değiştir template için templateUrl: 'name-age.html'.

Kod başarıyla yürütülürse, bu çıktı görünür.

Çıktı:

Yukarıdaki çıktıdan, özel yönergenin şablonundaki kod parçasının sayfaya eklendiğini görebiliriz. Şablon hala statik olduğundan, bir sonraki adım ona veri sağlamaktır.

AngularJS Yönergeleri ve Kapsamları

MKS kapsam Görünüm ile denetleyici arasındaki verileri yöneterek denetleyiciyi görünüme bağlayan yapıştırıcı olarak tanımlanır.

Özel AngularJS yönergeleri oluştururken, varsayılan olarak üst denetleyicideki kapsam nesnesine erişimleri olur. Bu, aynı kapsam nesnesidir, kopyası değildir.

Bu şekilde özel direktifin ana denetleyiciye aktarılan verilerden faydalanması kolaylaşır.

Şimdi, özel yönergemizde üst denetleyicinin kapsamını nasıl kullanabileceğimize dair bir örneğe bakalım. Aşağıdaki ekran görüntüsünde dört adım numaralandırılmıştır.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <div ng-guru=""></div>

</div>

<script type="text/javascript">

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

    app.controller('DemoController',function($scope) {
        $scope.tutorialName = "Angular JS";

    });

        app.directive('ngGuru',function(){
        return {
         template: '<div>{{tutorialName}}</div>'
     }
    });

</script>

</body>
</html>

Code açıklama

1. Öncelikle “DemoController” adında bir denetleyici oluşturuyoruz. Bu denetleyicide, tutorialName adında bir değişken tanımlıyoruz ve bunu tek bir ifadeyle kapsam nesnesine bağlıyoruz: $scope.tutorialName = "Angular JS".
2. Özel yönergemizde bir ifade kullanarak “tutorialName” değişkenini çağırabiliriz. Bu değişkene, bu yönergenin ebeveyni olacak olan “DemoController” denetleyicisinde tanımlandığı için erişilebilir olacaktır.
3. Denetleyiciye, ana div etiketimiz olarak görev yapacak bir div etiketiyle başvuruyoruz. Özel yönergemizin öğreticiAdı değişkenine erişebilmesi için önce bunun yapılması gerektiğini unutmayın.
4. Sonunda özel yönergemiz olan “ng-guru”yu div etiketimize ekledik.

Kod başarıyla yürütülürse, bu çıktı görünür.

Çıktı:

Yukarıdaki çıktı, özel yönergemiz "ng-guru"nun üst denetleyicideki tutorialName kapsam değişkenini kullandığını açıkça göstermektedir. Üst kapsamı paylaşmak kullanışlıdır, ancak her zaman istediğiniz şey olmayabilir.

Denetleyicileri Yönergelerle Kullanma

AngularJS şu olanağı sağlar: denetleyicinin üye değişkenine doğrudan özel yönergelerden erişin kapsam nesnesine ihtiyaç duymadan.

Bu durum bazen gerekli hale gelir çünkü bir uygulamada birden fazla denetleyiciye ait birden fazla kapsam nesnesi olabilir ve bu nedenle yanlış denetleyicinin kapsam nesnesine yanlışlıkla erişme olasılığı yüksektir.

Bu tür bir senaryoda, yönergemden özellikle "Bu denetleyiciye erişmek istiyorum" diyebilmenin bir yolu vardır.

Bunu nasıl başarabileceğimize dair bir örneğe bakalım. Ekran görüntüsünde dört adım numaralandırılmıştır.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <div ng-guru99=""></div>

</div>

<script type="text/javascript">

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

    app.controller('DemoController',function() {
        this.tutorialName = "Angular";

    });

     app.directive('ngGuru99',function(){
        return {
         controller: 'DemoController',

          controllerAs: 'ctrl',

          template: '{{ctrl.tutorialName}}'
     };
    });

</script>

</body>
</html>

Code açıklama

1. Öncelikle “DemoController” adında bir denetleyici oluşturuyoruz. Bu denetleyicide “tutorialName” adında bir değişken tanımlayacağız ve bu sefer, onu kapsam nesnesine bağlamak yerine doğrudan denetleyiciye bağlayacağız.
2. Özel yönergemizde, Controller parametre anahtar kelimesini kullanarak “DemoController” denetleyicisini kullanmak istediğimizi özellikle belirtiyoruz.
3. "controllerAs" parametresini kullanarak denetleyiciye bir referans oluşturuyoruz. Bu, AngularJS tarafından tanımlanmıştır ve denetleyiciye bir takma adla referans vermenin yoludur.
4. Son olarak, şablonumuzda 3. adımda oluşturulan referansı ve 1. adımda doğrudan denetleyiciye eklenen üye değişkenini kullanıyoruz.

Not: Bir yönergede birden fazla denetleyiciye erişmek, denetleyicinin ilgili bloklarını, controllerAs ve şablon ifadelerini belirterek mümkündür. Bir denetleyiciye ulaşmak için... ebeveyn Bunun yerine yönergenin denetleyicisini kullanın. require.

Kod başarıyla yürütülürse, bu çıktı görünür.

Çıktı:

Çıktı açıkça gösteriyor ki, özel yönerge DemoController'a ve ona bağlı tutorialName üye değişkenine erişiyor ve "Angular" metnini görüntülüyor. Her iki yaklaşım da hala paylaşılan bir kapsamdan okuma yapıyor, oysa izole bir kapsam bunu engelliyor.

İzole bir kapsamda @, =, & ve < Bağlamaları Nasıl Farklılık Gösterir?

Üst kapsamıyla aynı kapsamı paylaşan bir yönerge, denetleyici başına yalnızca bir kez kullanılabilir, çünkü iki kopya aynı değişkenler için çakışmaya neden olur. scope nesne bir oluşturur izole kapsamıBu yönerge, listelediğiniz özellikler dışında dışarıda hiçbir şey görmez. Her giriş, değerinin nasıl iletileceğini belirten bir önek sembolü kullanır.

👍 Bahşiş: Ulaşmak < önce =Tek yönlü veri bağlama, izlemesi daha ucuzdur ve bir bileşenin çağıran bileşenin verilerini sessizce değiştirmesini engeller. Sonraki bölümde bu yöntem kullanılacaktır. @.

AngularJS Yönergeleri ve Bileşenleri: ng-transclude

Daha önce de belirttiğimiz gibi, AngularJS, işlevselliği genişletmek için tasarlanmıştır. HTML. Özel yeniden kullanılabilir yönergeleri kullanarak nasıl kod enjeksiyonu yapabileceğimizi zaten gördük.

Ancak modern web uygulaması geliştirmede, geliştirme kavramı da mevcuttur.ping Web bileşenleri, temelde kodumuzda bileşen olarak kullanabileceğimiz kendi HTML etiketlerimizi oluşturmak anlamına gelir.

Dolayısıyla AngularJS, HTML etiketlerini genişletmek için yeni bir güç seviyesi sunarak, etiketin içine çağrı yapanın koyduğu her türlü işaretlemeyi sarmalama olanağı sağlar.

Bu şu şekilde yapılır:ng-transclude"`<custom>` yönergesi, AngularJS'e işaretlemedeki `custom` etiketinin içine yerleştirilen her şeyi yakalamasını ve o noktada şablona eklemesini söyler.

Bunu nasıl başarabileceğimize dair bir örnek verelim. Ekran görüntüsünde aşağıdaki beş madde numaralandırılmıştır.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <pane title="{{title}}">Angular JS</pane>

</div>

<script type="text/javascript">

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

    app.directive('pane',function(){
        return {

            transclude:true,
            scope :{title:'@'},
            template: '<div style="border: 1px solid black;"> '+
                        '<ng-transclude></ng-transclude>'+
                            '</div>'
        };
    });

</script>

</body>
</html>

Code açıklama

1. Bu yönergeyi kullanarak, kodunu sağlayan bir fabrika fonksiyonu içeren "pane" adlı özel bir HTML etiketi tanımlıyoruz. Çıktıda, pane etiketi "Angular JS" metnini, siyah düz bir kenarlıkla çevrili bir dikdörtgen içinde görüntüler.
2. "Transclude" özelliği true olarak ayarlanmalıdır; bu, AngularJS'ye orijinal iç işaretlemeyi korumasını ve kullanılabilir hale getirmesini söyler. ng-transclude.
3. Kapsam nesnesinde bir başlık bağlaması tanımlıyoruz. Nitelikler normalde ad/değer çiftleri şeklinde yazılır, örneğin: name="value"Bizim durumumuzda, panel etiketindeki özellik "title"dır ve "@" sembolü AngularJS'den bu özelliği enterpolasyonlu bir dize olarak kopyalamasını ister.
4. Şablon, kontrolümüz için düz siyah bir kenarlık çizer ve aktarılan işaretlemenin ekleneceği noktayı işaretler.
5. Son olarak, tanımladığımız title özniteliğiyle birlikte özel HTML etiketimizi çağırıyoruz.

⚠️ Düzeltme: Orijinal metinde "@" işareti "Angular'dan gelen gereksinim" olarak tanımlanmıştır. Bu bir formalite değildir: @ Yukarıdaki tabloda yer alan dört izole kapsamlı bağlama sembolünden biridir ve her zaman bir dize döndürür. Bu şablon ayrıca asla görüntülenmez. {{title}}ve hiçbir kontrolör tanımlamıyor titleBu nedenle yalnızca eklenmiş metin görünür.

Kod başarıyla yürütülürse, bu çıktı görünür.

Çıktı:

• Çıktı, "Angular JS" metnini içeren, kenarlıklı bir kutu olarak oluşturulmuş özel bölme öğesini göstermektedir.

Bir yönerge, içinde başka yönergeler de barındırabilir; bu şekilde daha büyük bileşenler bir araya getirilir.

İç İçe Yönergeler

AngularJS'de yönergeler iç içe yerleştirilebilir. Tıpkı herhangi bir modül veya fonksiyonun iç içe yerleştirilmesi gibi. Programlama dili, yönergeleri birbirinin içine yerleştirmeniz gerekebilir.

Aşağıdaki örneği inceleyerek bunu daha iyi anlayabilirsiniz.

Bu örnekte “outer” ve “inner” adında 2 direktif oluşturuyoruz.

• İç direktif “İç” adında bir metin görüntüler.
• Dış yönerge aslında “İç” adlı metni görüntülemek için iç yönergeye çağrı yapar.

Aşağıdaki ekran görüntüsü, hem yönerge tanımlarını hem de birinin diğerini çağırdığı noktayı işaretlemektedir.

</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <outer></outer>
</div>

<script type="text/javascript">

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

    app.directive('outer',function(){
        return {

            restrict:'E',
            template: '<div><h1>Outer</h1><inner></inner></div>',
        }});

    app.directive('inner',function(){
        return {

            restrict:'E',
            template: '<div><h1>Inner</h1></div>',
        }
    });
</script>

</body>
</html>

⚠️ Uyarı — bu ilanda kusur korunmuştur: Yayınlanan liste şu noktadan başlıyor: </head>açılışını kaçırdı <!DOCTYPE html>, <html> hem de <head> Bu satırları çalıştırmadan önce ekleyin.

Code açıklama

1. Ana direktifimiz gibi davranacak “dış” adında bir direktif oluşturuyoruz. Bu direktif daha sonra “iç” direktife çağrı yapacaktır.
2. MKS restrict:'E' Bu seçenek, AngularJS'e her yönergeyi şu şekilde eşleştirmesini söyler: eleman isim oldukları için etiket olarak da yazılabiliyorlar. <outer> hem de <inner>'E' harfi, 'Element' kelimesinin kısaltılmış halidir.
3. Burada div etiketinde “Inner” metnini görüntüleyen iç yönergeyi oluşturuyoruz.
4. Dış yönergenin şablonunda, iç yönergeyi çağırıyoruz. Yani burada iç yönergeden gelen şablonu dış yönergeye enjekte ediyoruz.
5. Son olarak doğrudan dış yönergeyi seslendiriyoruz.

⚠️ Düzeltme: Orijinal metin şu iddiada bulunuyordu: restrict:'E' "İç yönergeden gelen verilerin dış yönergeye ulaşılabilir olmasını sağlamak" için gereklidir. Oysa böyle bir işlevi yoktur; sadece kontrol eder. Nasıl Bir yönerge yazılabilir. İç içe yazma işlemi, derleyicinin az önce eklediği şablonun içine doğru ilerlemeye devam etmesi nedeniyle işe yarar. Veri paylaşmak için şunu kullanın: require hem de controller.

Kod başarıyla yürütülürse, bu çıktı görünür.

Çıktı:

Çıktıdan,

• Görüldüğü üzere hem dış hem de iç yönergeler çağrılmış ve her iki div etiketindeki metin de görüntülenmiştir.

Bir yönergenin yaptığı işin sadece yarısı işaretleme kodunu oluşturmaktır; diğer yarısı ise kullanıcıya tepki vermektir.

Yönergede Olayların Ele Alınması

Etkinlikler Fare tıklamaları veya düğme tıklamaları gibi işlemler, direktiflerin içinden de ele alınabilir. Bu, link fonksiyonu kullanılarak yapılır. Link fonksiyonu, direktifin bir HTML sayfasındaki DOM öğelerine bağlanmasını sağlar.

Sözdizimi:

Bağlantı fonksiyonunun sözdizimi aşağıda gösterildiği gibidir.

link: function ($scope, element, attrs)

Bağlantı fonksiyonu normalde 3 parametre alır: kapsam, yönergenin ilişkilendirildiği öğe ve hedef öğenin öznitelikleri. Gerekli bir denetleyici ve bir transclude fonksiyonu olmak üzere iki parametre daha, uygulandıklarında eklenir.

Derleme Aşaması ile Bağlantı Aşaması Arasındaki Fark

AngularJS, bir yönergeyi iki aşamada işler ve hangisinin hangisi olduğunu bilmek, kodunuzun nereye ait olduğunu gösterir.

• Derlemek Şablon öğesi üzerinde, herhangi bir kapsam oluşturulmadan önce bir kez çalışır. Her klon tarafından paylaşılan yapısal düzenlemeler için uygundur.
• Link Şablon kopyalandıktan ve bir kapsam eklendikten sonra, her örnek için bir kez çalışır. DOM dinleyicileri ve kapsam okuma işlemleri buraya aittir.

Derleme işleminin kapsamı olmadığı için, veri gerektiren her şey bağlantı işlemine aittir; bu nedenle aşağıdaki örnek bunu tanımlar. link yalnız.

Bunu nasıl başarabileceğimize dair bir örneğe bakalım. Ekran görüntüsünde aşağıdaki dört madde numaralandırılmıştır.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <div ng-guru="">Click Me</div>
</div>

<script type="text/javascript">

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

    app.directive('ngGuru',function(){
        return {

            link:function($scope,element,attrs) {
                element.bind('click',function () {
                    element.html('You clicked me');
                });}
        }});
</script>

</body>
</html>

Code açıklama

1. AngularJS'de tanımlandığı gibi link fonksiyonunu kullanarak, yönergeye HTML DOM'daki olaylara erişme yeteneği kazandırıyoruz.
2. HTML DOM öğesi olan "div" öğesine ait bir olaya yanıt vermek istediğimiz için "element" anahtar kelimesini kullanıyoruz. Ardından, öğenin tıklama olayına özel işlevsellik eklemek için "bind" işlevini kullanıyoruz. "Click" kelimesi, herhangi bir HTML kontrolünün tıklama olayını belirtmek için kullanılan anahtar kelimedir.
3. Burada, öğenin (örneğimizde div öğesinin) içindeki HTML kodunu 'Bana tıkladınız' metniyle değiştirmek istediğimizi söylüyoruz.
4. Burada div etiketimizi ng-guru özel direktifini kullanacak şekilde tanımlıyoruz.

👍 Bahşiş: Bir yönerge kendi kendini temizlemelidir. İçindeki öğeden daha uzun süre varlığını sürdüren tüm dinleyicileri kaldırın. element.on('$destroy', ...)Ya da sayfa bellek sızıntısına neden oluyor.

Kod başarıyla yürütülürse, bu çıktı görünür.

Çıktı:

• Başlangıçta kullanıcıya 'Bana Tıklayın' metni gösterilir, çünkü bu div etiketinin içinde tanımlanmış olan metindir. Div etiketine tıkladığınızda ise bunun yerine aşağıdaki çıktı gösterilir.

Yukarıdaki örneklerin her birinde aynı tanım nesnesinin bir veya iki özelliği kullanılmıştır. Tam set, saklamaya değerdir.ping ele.

Yönerge Tanımı Nesne Özellikleri Referansı

Yönerge fabrikası tarafından döndürülen nesne şudur: Yönerge Tanımı NesnesiHer özellik, yönergenin nasıl davrandığına dair bir soruyu yanıtlar.

👍 Bahşiş: Dil eğitimiyle restrict, template hem de link. Ekle scope yeniden kullanım için, controller hem de require direktifler arası görüşmeler için ve ayrılmak için priority hem de terminal yalnız.

SSS