[angularjs] Angular로 Tree View를 만들 수 있습니까?

이와 같은 것을 만들 때 가장 좋은 해결책은 재귀 지시문입니다. 그러나 이러한 지시문을 만들면 AngularJS가 무한 루프에 빠진다는 것을 알 수 있습니다.

이를위한 해결책은 지시문이 컴파일 이벤트 중에 요소를 제거하고 링크 이벤트에서 수동으로 컴파일하고 추가하게하는 것입니다.

나는 이 글 에서 이것 에 대해 알아 내고이 기능 을 서비스로 추상화했다 .

module.factory('RecursionHelper', ['$compile', function($compile){
    return {
        /**
         * Manually compiles the element, fixing the recursion loop.
         * @param element
         * @param [link] A post-link function, or an object with function(s) registered via pre and post properties.
         * @returns An object containing the linking functions.
         */
        compile: function(element, link){
            // Normalize the link parameter
            if(angular.isFunction(link)){
                link = { post: link };
            }

            // Break the recursion loop by removing the contents
            var contents = element.contents().remove();
            var compiledContents;
            return {
                pre: (link && link.pre) ? link.pre : null,
                /**
                 * Compiles and re-adds the contents
                 */
                post: function(scope, element){
                    // Compile the contents
                    if(!compiledContents){
                        compiledContents = $compile(contents);
                    }
                    // Re-add the compiled contents to the element
                    compiledContents(scope, function(clone){
                        element.append(clone);
                    });

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

이 서비스를 사용하면 트리 지시어 (또는 다른 재귀 지시어)를 쉽게 만들 수 있습니다. 다음은 트리 지시문의 예입니다.

module.directive("tree", 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);
        }
    };
});

데모는 이 Plunker 를 참조하십시오 . 나는이 솔루션을 가장 좋아합니다.

1. HTML을 덜 깨끗하게 만드는 특별한 지시문이 필요하지 않습니다.
2. 재귀 논리는 RecursionHelper 서비스로 추상화되므로 지시문을 깨끗하게 유지하십시오.

업데이트 : 사용자 지정 연결 기능에 대한 지원이 추가되었습니다.

답변

module.directive("tree", function($compile) {
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(tElement, tAttr) {
        var contents = tElement.contents().remove();
        var compiledContents;
        return function(scope, iElement, iAttr) {
            if(!compiledContents) {
                compiledContents = $compile(contents);
            }
            compiledContents(scope, function(clone, scope) {
                     iElement.append(clone);
            });
        };
    }
};
});