Bagaimanakah Kami Boleh Mengendalikan Rekursi dalam Arahan Sudut dengan Berkesan?

Rekursi dalam Arahan Sudut

Arahan Sudut Rekursif telah mencetuskan banyak perbincangan, dengan penyelesaian terbahagi kepada dua kategori:

Kompilasi HTML Manual

Pendekatan ini melibatkan membina HTML secara berperingkat berdasarkan keadaan skop masa jalan. Walau bagaimanapun, ia mengalami ketidakupayaan untuk mengalih keluar kod yang disusun dan kerumitan mengurus proses penyusunan secara manual.

Templat Skrip

Kaedah ini menggunakan templat yang merujuk kepada diri mereka sendiri, dengan berkesan mengelakkan had arahan. Walau bagaimanapun, ia mengorbankan parameterisasi dan terikat kepada contoh pengawal baharu.

Penyelesaian Diperhalusi: Perkhidmatan Pembantu Rekursi

Diinspirasikan oleh penyelesaian sedia ada, pendekatan yang lebih elegan melibatkan penciptaan perkhidmatan Pembantu Rekursi yang abstrak fungsi rekursi. Begini caranya:

module.factory('RecursionHelper', ['$compile', function($compile){
    return {
        compile: function(element, link){
            var contents = element.contents().remove();
            var compiledContents;
            return {
                pre: link && link.pre ? link.pre : null,
                post: function(scope, element){
                    if (!compiledContents) {
                        compiledContents = $compile(contents);
                    }
                    compiledContents(scope, function(clone){
                        element.append(clone);
                    });
                    if (link && link.post) {
                        link.post.apply(null, arguments);
                    }
                }
            };
        }
    };
}]);

Perkhidmatan pembantu ini membolehkan penyusunan elemen secara manual, memecahkan gelung rekursi. Ia memerlukan elemen dan fungsi pautan sebagai parameter dan mengembalikan fungsi pemautan untuk pra dan pasca penyusunan.

Penggunaan

Perkhidmatan Recursion Helper boleh digunakan dalam arahan seperti 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

Penyelesaian ini cemerlang kerana:

• Ia menghapuskan keperluan untuk arahan khusus, mengurangkan kerumitan HTML.
• Logik rekursi terkandung dalam perkhidmatan Recursion Helper, menghasilkan arahan yang lebih bersih.

Kemas kini

Untuk Angular 1.5.x dan ke atas, arahan rekursif berfungsi di luar kotak apabila menggunakan templat. Walau bagaimanapun, mereka masih memerlukan perkhidmatan Recursion Helper apabila menggunakan URL templat.

Atas ialah kandungan terperinci Bagaimanakah Kami Boleh Mengendalikan Rekursi dalam Arahan Sudut dengan Berkesan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!