Tautan vs kompilasi vs pengontrol

Saat Anda membuat arahan, Anda dapat memasukkan kode ke kompiler, fungsi tautan, atau pengontrol.

Dalam dokumen, mereka menjelaskan bahwa:

• fungsi kompilasi dan tautan digunakan dalam berbagai fase siklus sudut
• pengendali dibagi di antara arahan

Namun, bagi saya tidak jelas, kode seperti apa yang harus dituju.

Misalnya: Dapatkah saya membuat fungsi dalam kompilasi dan membuatnya dilampirkan ke lingkup di tautan atau hanya melampirkan fungsi ke lingkup di controller?

Bagaimana pengontrol dibagikan di antara arahan, jika setiap arahan dapat memiliki pengontrolnya sendiri? Apakah pengendali benar-benar dibagikan atau hanya properti lingkup?

Menyusun :

Ini adalah fase di mana Angular sebenarnya menyusun arahan Anda. Fungsi kompilasi ini dipanggil sekali saja untuk setiap referensi ke arahan yang diberikan. Misalnya, Anda menggunakan arahan ng-repeat. ng-repeat harus mencari elemen yang dilampirkan, mengekstrak fragmen html yang dilampirkan dan membuat fungsi template.

Jika Anda telah menggunakan HandleBar, garis bawah template atau yang setara, itu seperti mengkompilasi template mereka untuk mengekstrak fungsi template. Untuk fungsi templat ini, Anda meneruskan data dan nilai kembalinya fungsi tersebut adalah html dengan data di tempat yang tepat.

Fase kompilasi adalah langkah di Angular yang mengembalikan fungsi template. Fungsi template ini dalam sudut disebut fungsi menghubungkan.

Menghubungkan fase:

Fase penautan adalah tempat Anda melampirkan data ($ scope) ke fungsi penautan dan itu akan mengembalikan Anda html tertaut. Karena arahan juga menentukan ke mana html ini pergi atau apa yang berubah, itu sudah baik untuk pergi. Ini adalah fungsi tempat Anda ingin membuat perubahan pada html yang ditautkan, yaitu html yang sudah memiliki data terlampir padanya. Dalam sudut jika Anda menulis kode pada fungsi penautan, umumnya fungsi pasca-tautan (secara default). Ini semacam panggilan balik yang dipanggil setelah fungsi penautan telah menautkan data dengan templat.

Pengendali:

Pengontrol adalah tempat di mana Anda memasukkan beberapa logika spesifik direktif. Logika ini dapat masuk ke fungsi penghubung juga, tetapi kemudian Anda harus meletakkan logika itu pada ruang lingkup untuk membuatnya "dapat dibagikan". Masalah dengan itu adalah bahwa Anda kemudian akan merusak ruang lingkup dengan hal-hal arahan Anda yang tidak benar-benar sesuatu yang diharapkan. Jadi apa alternatifnya jika dua Arahan ingin berbicara satu sama lain / bekerja sama satu sama lain? Tentu Anda bisa memasukkan semua logika itu ke dalam layanan dan kemudian membuat kedua arahan ini bergantung pada layanan itu, tetapi itu hanya membawa satu ketergantungan lagi. Alternatifnya adalah menyediakan Pengendali untuk lingkup ini (biasanya mengisolasi ruang lingkup?) Dan kemudian pengontrol ini disuntikkan ke arahan lain ketika arahan itu "membutuhkan" yang lain.

Saya ingin menambahkan juga apa yang dikatakan buku O'Reily AngularJS oleh Tim Google:

Pengontrol - Membuat pengontrol yang menerbitkan API untuk berkomunikasi di seluruh arahan. Contoh yang baik adalah Directive to Directive Communication

Tautan - Secara terprogram memodifikasi instance elemen DOM yang dihasilkan, menambahkan pendengar acara, dan mengatur pengikatan data.

Kompilasi - Secara terprogram memodifikasi templat DOM untuk fitur-fitur lintas salinan arahan, seperti ketika digunakan dalam ng-repeat. Fungsi kompilasi Anda juga dapat mengembalikan fungsi tautan untuk memodifikasi instance elemen yang dihasilkan.

A directivememungkinkan Anda untuk memperluas kosakata HTML secara deklaratif untuk membangun komponen web. The ng-appatribut direktif, jadi adalah ng-controllerdan semua ng- prefixed attributes. Arahan dapat attributes, tagsatau bahkan class names, comments.

Bagaimana arahan dilahirkan ( compilationdan instantiation)

Kompilasi: Kami akan menggunakan compilefungsi untuk kedua manipulateDOM sebelum diberikan dan mengembalikan linkfungsi (yang akan menangani tautan untuk kami). Ini juga tempat untuk meletakkan metode apa pun yang perlu dibagikan dengan semua instancesarahan ini.

tautan: Kami akan menggunakan linkfungsi ini untuk mendaftarkan semua pendengar pada elemen DOM tertentu (yang dikloning dari templat) dan mengatur ikatan kami ke halaman.

Jika diatur dalam compile()fungsi mereka hanya akan ditetapkan sekali (yang sering Anda inginkan). Jika diatur dalam link()fungsi mereka akan disetel setiap kali elemen HTML terikat ke data dalam objek.

<div ng-repeat="i in [0,1,2]">
    <simple>
        <div>Inner content</div>
    </simple>
</div>

app.directive("simple", function(){
   return {
     restrict: "EA",
     transclude:true,
     template:"<div>{{label}}<div ng-transclude></div></div>",        
     compile: function(element, attributes){  
     return {
             pre: function(scope, element, attributes, controller, transcludeFn){

             },
             post: function(scope, element, attributes, controller, transcludeFn){

             }
         }
     },
     controller: function($scope){

     }
   };
});

Compilefungsi mengembalikan fungsi predan posttautan. Dalam fungsi pra tautan kami memiliki template contoh dan juga cakupan dari controller, tetapi template tersebut tidak terikat pada cakupan dan masih belum memiliki konten yang ditransklusikan.

Postfungsi tautan adalah tempat tautan pos adalah fungsi terakhir yang dijalankan. Sekarang transclusionselesai the template is linked to a scope,, dan view will update with data bound values after the next digest cycle. The linkpilihan adalah hanya jalan pintas untuk membuat sebuah post-linkfungsi.

controller: Controller directive dapat diteruskan ke fase penghubungan / kompilasi directive lainnya. Ini dapat disuntikkan ke arahan lain sebagai sarana untuk digunakan dalam komunikasi antar-direktif.

Anda harus menentukan nama arahan yang diperlukan - Ini harus terikat ke elemen yang sama atau induknya. Nama dapat diawali dengan:

? – Will not raise any error if a mentioned directive does not exist.
^ – Will look for the directive on parent elements, if not available on the same element.

Gunakan braket persegi [‘directive1′, ‘directive2′, ‘directive3′]untuk memerlukan beberapa arahan pengontrol.

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

app.controller('MainCtrl', function($scope, $element) {
});

app.directive('parentDirective', function() {
  return {
    restrict: 'E',
    template: '<child-directive></child-directive>',
    controller: function($scope, $element){
      this.variable = "Hi Vinothbabu"
    }
  }
});

app.directive('childDirective', function() {
  return {
    restrict:  'E',
    template: '<h1>I am child</h1>',
    replace: true,
    require: '^parentDirective',
    link: function($scope, $element, attr, parentDirectCtrl){
      //you now have access to parentDirectCtrl.variable
    }
  }
});

Selain itu, alasan yang baik untuk menggunakan fungsi pengontrol vs. tautan (karena keduanya memiliki akses ke ruang lingkup, elemen, dan attr) adalah karena Anda dapat meneruskan layanan atau ketergantungan yang tersedia ke pengontrol (dan dalam urutan apa pun), sedangkan Anda tidak dapat melakukannya dengan fungsi tautan. Perhatikan tanda tangan yang berbeda:

controller: function($scope, $exceptionHandler, $attr, $element, $parse, $myOtherService, someCrazyDependency) {...

vs.

link: function(scope, element, attrs) {... //no services allowed

ini adalah contoh yang baik untuk memahami fase arahan http://codepen.io/anon/pen/oXMdBQ?editors=101

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

app.directive('slngStylePrelink', function() {
    return {
        scope: {
            drctvName: '@'
        },
        controller: function($scope) {
            console.log('controller for ', $scope.drctvName);
        },
        compile: function(element, attr) {
            console.log("compile for ", attr.name)
            return {
                post: function($scope, element, attr) {
                    console.log('post link for ', attr.name)
                },
                pre: function($scope, element, attr) {
                    $scope.element = element;
                    console.log('pre link for ', attr.name)
                        // from angular.js 1.4.1
                    function ngStyleWatchAction(newStyles, oldStyles) {
                        if (oldStyles && (newStyles !== oldStyles)) {
                            forEach(oldStyles, function(val, style) {
                                element.css(style, '');
                            });
                        }
                        if (newStyles) element.css(newStyles);
                    }

                    $scope.$watch(attr.slngStylePrelink, ngStyleWatchAction, true);

                    // Run immediately, because the watcher's first run is async
                    ngStyleWatchAction($scope.$eval(attr.slngStylePrelink));
                }
            };
        }
    };
});

html

<body ng-app="myapp">
    <div slng-style-prelink="{height:'500px'}" drctv-name='parent' style="border:1px solid" name="parent">
        <div slng-style-prelink="{height:'50%'}" drctv-name='child' style="border:1px solid red" name='child'>
        </div>
    </div>
</body>

• compile : digunakan ketika kita perlu memodifikasi template direktif, seperti menambahkan ekspresi baru, menambahkan direktif lain di dalam direktif ini
• controller : digunakan ketika kita perlu membagikan / menggunakan kembali data $ scope
• tautan : ini adalah fungsi yang digunakan ketika kita perlu melampirkan pengendali acara atau untuk memanipulasi DOM.