¿Es posible hacer una vista de árbol con Angular?

Solución:

Echa un vistazo a este violín

Original: http://jsfiddle.net/brendanowen/uXbn6/8/

Actualizado: http://jsfiddle.net/animaxf/uXbn6/4779/

Esto debería darle una buena idea de cómo mostrar un tree like structure usando angular. ¡Es como usar la recursividad en html!

Si está utilizando Bootstrap CSS …

He creado un control de árbol (directiva) reutilizable simple para AngularJS basado en una lista de “navegación” de Bootstrap. Agregué sangría, íconos y animación adicionales. Los atributos HTML se utilizan para la configuración.

No usa recursividad.

lo llamé árbol-de-navegación-de-arranque-angular (nombre pegadizo, ¿no crees?)

Hay un ejemplo aquí y la fuente está aquí.

Al hacer algo como esto, la mejor solución es una directiva recursiva. Sin embargo, cuando crea una directiva de este tipo, descubre que AngularJS entra en un bucle sin fin.

La solución para esto es dejar que la directiva elimine el elemento durante el evento de compilación, y compile y agregue manualmente en los eventos de enlace.

Me enteré de esto en este hilo y resumí esta funcionalidad en un servicio.

module.factory('RecursionHelper', ['$compile', function($compile){
    return {
        /**
         * Manually compiles the element, fixing the recursion loop.
         * @param element
         * @param https://newbedev.com/is-it-possible-to-make-a-tree-view-with-angular
 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);
                    }
                }
            };
        }
    };
}]);

Con este servicio, puede crear fácilmente una directiva de árbol (u otras directivas recursivas). A continuación, se muestra un ejemplo de una directiva de árbol:

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);
        }
    };
});

Vea este Plunker para una demostración. Me gusta más esta solución porque:

1. No necesita una directiva especial que haga que su html sea menos limpio.
2. La lógica de recursividad se abstrae en el servicio RecursionHelper, por lo que mantiene limpias las directivas.

Actualización: soporte agregado para funciones de enlace personalizadas.

---

---

Utiliza Nuestro Buscador