Arahan Sudut Rekursif

Rekursi ialah teknik berkuasa yang membenarkan arahan untuk mencipta elemen bersarang. Walau bagaimanapun, penggunaan rekursif dalam arahan Sudut menimbulkan beberapa cabaran.

Pendekatan kepada Arahan Sudut Rekursif

Penyelesaian sedia ada menangani isu ini dalam dua cara utama:

1. Kompilasi HTML Manual: Pendekatan ini melibatkan secara manual menyusun HTML berdasarkan keadaan skop masa jalan. Walau bagaimanapun, ia memperkenalkan cabaran mengurus proses penyusunan dengan teliti.
2. Templat Skrip: Pendekatan ini mengelak daripada menggunakan arahan, sebaliknya menggunakan templat yang merujuk sendiri. Walau bagaimanapun, ia tidak mempunyai keupayaan parameterisasi arahan dan mengikat secara tegar kepada kejadian pengawal baharu.

Corak Rekursif Berparameter

Untuk menangani batasan pendekatan sedia ada, corak rekursif berparameter boleh dilaksanakan melalui a perkhidmatan.

Perkhidmatan RecursionHelper

Perkhidmatan RecursionHelper menyediakan fungsi kompilasi yang mengendalikan rekursi. Ia menerima elemen dan fungsi pautan (atau objek dengan fungsi pra dan pasca pautan berdaftar).

module.factory('RecursionHelper', ['$compile', function($compile) {
    return {
        compile: function(element, link) {
            // Remove element contents to break recursion
            var contents = element.contents().remove();

            return {
                pre: link.pre || null,
                post: function(scope, element) {
                    // Compile and re-add contents
                    var compiledContents = $compile(contents);
                    compiledContents(scope, function(clone) {
                        element.append(clone);
                    });

                    // Call post-linking function, if any
                    link.post && link.post.apply(null, arguments);
                }
            };
        }
    };
}]);

Penggunaan Perkhidmatan RecursionHelper

The RecursionHelper perkhidmatan dimasukkan ke dalam arahan sebagai berikut:

module.directive("tree", ["RecursionHelper", function(RecursionHelper) {
    return {
        restrict: "E",
        scope: {family: '='},
        template: `
            <p>{{ family.name }}</p>
            <ul>
                <li ng-repeat="child in family.children">
                    <tree family="child"></tree>
                </li>
            </ul>
        `,
        compile: function(element) {
            return RecursionHelper.compile(element);
        }
    };
}]);

Kelebihan Pendekatan ini

• Mengekalkan kebersihan HTML dengan mengelakkan arahan yang tidak perlu.
• Mengabstrak logik rekursi ke dalam perkhidmatan, meningkatkan arahan kebolehbacaan.

Kesesuaian Angular 1.5

Dalam Angular 1.5.x dan ke atas, rekursi boleh dilaksanakan terus tanpa perkhidmatan RecursionHelper, tetapi hanya dengan templat, bukan dengan templateUrl.

Atas ialah kandungan terperinci Bagaimanakah Arahan Sudut Rekursif Boleh Dilaksanakan dengan Cekap dan Apakah Kelebihan Setiap Pendekatan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!