Estoy usando Angular de Bootstrap de interfaz de usuario para mostrar un tabset. El script que se incluyen ui-bootstrap-tpls-0.6.0.min.js y algunos de la plantilla de los archivos html.

aquí está mi lenguaje:

<tabset>
    <tab ng-hide="!hideme">
        <tab-heading>
            tab1
        </tab-heading>
        <div>
            tab content 1
        </div>
    </tab>
    <tab ng-hide="hideme">
        <tab-heading>
            tab2
        </tab-heading>
        <div>
            tab content 2
        </div>
    </tab>
</tabset>

aquí está mi controlador de

function myController($scope) {
    $scope.hideme = true;
});

Este código no funciona (el 2º ficha no ocultar).
¿Cuál es el truco para aplicar ng atributo personalizado directiva?

OriginalEl autor user1669811 | 2013-09-27

2 Comentarios

  1. 13

    La tab directiva crea un nuevo ámbito, por lo que necesita para utilizar $parent para acceder a la modelo. Trate de

    ng-hide="$parent.hideme"
    esto funciona perfecto para mí. Gracias!
    El único problema ahora es si la 1ª pestaña ocultar, 2ª pestaña que se muestra, el contenido de la 1ª pestaña sigue mostrando como activo.

    OriginalEl autor zsong

  2. 2

    Primera Solución: Utilizar tanto ng-show y ng-hide

    <tabset>
    <tab ng-show="hideme">
        <tab-heading>
            tab1
        </tab-heading>
        <div>
            tab content 1
        </div>
    </tab>
    <tab ng-hide="hideme">
        <tab-heading>
            tab2
        </tab-heading>
        <div>
            tab content 2
        </div>
    </tab>

    Segunda Solución: Escribir una directiva

    .directive("hideTab", function() {
        return function(scope, elm, attrs) {
            scope.$watch(function() {
                $(elm).css("display", "none");
            });
        };
    });

    OriginalEl autor geniuscarrier

Dejar respuesta

Please enter your comment!
Please enter your name here