not - Angularjs-Ocultar contenido hasta que se cargue DOM

ng-if angularjs

Question

Tengo un problema en Angularjs donde hay un parpadeo en mi HTML antes de que mis datos regresen del servidor.

Aquí hay un video que demuestra el problema: http://youtu.be/husTG3dMFOM - observe el # | y la zona gris a la derecha.

He intentado ngCloak sin éxito (aunque ngCloak evita que los corchetes aparezcan como se prometió) y me pregunto cuál es la mejor forma de ocultar el contenido hasta que Angular haya rellenado el HTML.

Lo tengo para trabajar con este código en mi controlador:

var caseCtrl = function($scope, $http, $routeParams) {
    $(''#caseWrap'').hide(); // hides when triggered using jQuery
    var id = $routeParams.caseId;

    $http({method: ''GET'', url: ''/v1/cases/'' + id}).
        success(function(data, status, headers, config) {                   
            $scope.caseData = data;

            $(''#caseWrap'').show(); // shows using jQuery after server returns data
        }).
        error(function(data, status, headers, config) {
            console.log(''getCase Error'', arguments);
        });
}

... pero he escuchado una y otra vez que no debo manipular el DOM desde un controlador. Mi pregunta es ¿cómo puedo lograr esto usando una directiva? En otras palabras, ¿cómo puedo ocultar el elemento al que se adjunta una directiva hasta que todo el contenido se carga desde el servidor?

Answer 1

Agrega lo siguiente a tu CSS:

[ng/:cloak],[ng-cloak],.ng-cloak{display:none !important}

La compilación de sus plantillas angulares no está sucediendo lo suficientemente rápido.

ACTUALIZAR

No debes hacer manipulación de DOM en tu controlador. Hay dos cosas que puede hacer ... 1. ¡Puede interceptar cambios al valor dentro del alcance del controlador a través de una directiva! En su caso, cree una directiva como atributo al que se le asigna la propiedad que desea ver. En su caso, sería caseData . Si la casedata es falsey, escóndala. De lo contrario, demuéstralo.

2. Una forma más sencilla es simplemente usar ngShow = ''casedata''.

Código

var myApp = angular.module(''myApp'', []);
myApp.controller("caseCtrl", function ($scope, $http, $routeParams, $timeout) {
    $scope.caseData = null;
    //mimic a delay in getting the data from $http
    $timeout(function () {
        $scope.caseData = ''hey!'';
    }, 1000);

})
    .directive(''showHide'', function () {
    return {
        link: function (scope, element, attributes, controller) {
            scope.$watch(attributes.showHide, function (v) {
                if (v) {
                    element.show();
                } else {
                    element.hide();
                }
            });
        }
    };
});

HTML

<div ng-controller=''caseCtrl'' show-hide=''caseData''>using directive</div>
<div ng-controller=''caseCtrl'' ng-show=''caseData''>using ngShow</div>

JSFIDDLE: http://jsfiddle.net/mac1175/zzwBS/

Answer 2

En su CSS agregue:

[ng/:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

y simplemente agregue un atributo " ng-cloak " a su división como aquí:

<div id="template1" ng-cloak>{{scoped_var}}<div>

doc: https://docs.angularjs.org/api/ng/directive/ngCloak

Answer 3

En su elemento caseWrap, coloque ng-show="contentLoaded" y luego dónde tiene actualmente $(''#caseWrap'').show(); poner $scope.contentLoaded = true;

Si el elemento caseWrap está fuera de este controlador, puede hacer el mismo tipo de cosas usando $rootScope o events .

Answer 4

He usado la respuesta de Zack para crear una directiva de ''carga'', que podría ser útil para algunas personas.

Modelo:

<script id="ll-loading.html" type="text/ng-template">
  <div layout=''column'' layout-align=''center center''>
    <md-progress-circular md-mode="indeterminate" value="" md-diameter="52"></md-progress-circular>
  </div>
</script>

Directiva:

    directives.directive(''loading'', function() {
  return {
    restrict: ''E'',
    template: ''ll-loading.html'',
    link: function($scope,elem,attrs) {

      elem.show();

      $scope.$on(''loaded'', function() {
        console.log("loaded: ");
        elem.hide();
      });

    }
  }
});

Este ejemplo utiliza material angular en el html.

Answer 5

La respuesta aceptada no funcionó para mí. Tenía algunos elementos que tenían directivas ng-show y los elementos todavía se mostrarían momentáneamente incluso con la capa ng. Parece que ng-cloak se resolvió antes de que ng-show devolviera false. Agregar la clase ng-hide a mis elementos solucionó mi problema.

Answer 6

Ya que pediste una directiva, prueba esto.

.directive(''showOnLoad'', function() {
  return {
    restrict: ''A'',
    link: function($scope,elem,attrs) {

      elem.hide();

      $scope.$on(''show'', function() {
        elem.show();
      });

    }
  }
});

Pegue (show-on-load) en su elemento, y en su controlador inyecte $ rootScope, y use este evento de difusión cuando el html se haya cargado.

$rootScope.$broadcast(''show'');