Как правильно использовать директиву ng-cloak?

Как-то, ng-плащ в AngularJS не работает. Я хочу скрыть {{}} при загрузке страницы. Потому что это выглядит ужасно.

<!DOCTYPE html>
<html lang="en" ng-app>
    <head>
        <meta charset="UTF-8">
        <title>Angular Sample</title>
    </head>
    <body ng-model="isShow" ng-init="isShow=true">

        <p ng-show="isShow"><span ng-cloak>{{ isShow }}</span></p>
        <p ng-show="!isShow"><span ng-cloak>{{ isShow }}</span></p>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    </body>
</html>

ОТВЕТЫ

Ответ 1

Добавьте этот css из здесь

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

и используйте либо имя класса, либо атрибут в родительском div или где-либо, где вы определили свое приложение.

например:

<div ng-app="Random" class="ng-cloak">
</div>

Ответ 2

Из Angular docs:

Для получения наилучшего результата angular.js script должен быть загружен в разделе заголовка html-документа; в качестве альтернативы, правило css выше должно быть включено во внешнюю таблицу стилей приложения.

Ответ 3

Вы должны указать эти правила в своем CSS:

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

Ответ 4

Добавьте ниже в свой файл css: -

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

Ответ 5

Использование ngBind также должно устранить это (иногда я разрабатываю SharePoint, а ngCloak не работает).

AngularJS Docs:

Предпочтительно использовать ngBind вместо {{expression}}, если шаблон мгновенно отображается браузером в его исходном состоянии перед Angular скомпилирует его. Поскольку ngBind является атрибутом элемента, он делает привязки невидимыми для пользователя во время загрузки страницы.

Альтернативным решением этой проблемы будет использование ngCloak директива.

JS:

var app = angular.module('test', []);

app.controller('testCtrl', ['$scope', function($scope) {
  $scope.test = "Hello World";
}]);

HTML:

<html ng-app="test">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="testCtrl">
  <h1 ng-bind="test"></h1>
</body>

</html>

Ответ 6

Мое решение Я думаю, что я пробовал все вышеперечисленные предложения, но ничего не получилось. Некоторые используют ng-include, но это кажется немного большим, в дальнейшем это может быть страшно с создаваемой внутренней областью. Поэтому он попытался использовать стиль и стиль ng. В моем затронутом главном div.

<div class="container" style="display:hidden;" ng-style="loaded">

Затем я устанавливаю переменную сферы, загруженную в базовый контроллер.

$scope.loaded ={display:'block'};

Все еще получил все эти {{}}. Странно, когда наборы дисплеев блокируются только при загрузке angularjs. Затем я заметил, что у меня была консоль разработчика firefox f12, работающая. Он делает вещи. Глупый я

Ответ 7

Начиная с angular 1.3, вы должны указать имя для атрибута ng-app, чтобы он работал.

<html lang="en" ng-app="myApp">

В вашем JS:

angular.module("myApp",[])

Это приведет к загрузке angular.

Но для текущей ситуации, когда вы загружаете angular в нижней части страницы, требуется время для загрузки. Таким образом, css, требуемый для ng-cloak, пока недоступен.

Переместите тег js в тег или загрузите определенный CSS-код в свой CSS, чтобы он работал.

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

Ответ 8

В моем случае, я понял, что мои проблемы были сбором в ожидании аякс-запросов. Ng-cloak, вероятно, работает для статического содержимого, но если шаблон зависит от данных ajax, тогда это отображается таким образом перед получением ответа ajax.

Чтобы избежать этого, я определяю директиву:

Angu

mymodule
        .directive("ajaxCloak", ['$interval', '$http', function ($interval, $http) {
            return {
                restrict: 'A',
                link: function (scope, element, attrs) {
                    let stop = $interval(() => {
                        if ($http.pendingRequests.length === 0) {
                            $interval.cancel(stop);
                            attrs.$set("ajaxCloak", undefined);
                            element.removeClass("ajax-cloak");
                        }
                    }, 100);

                }
            };
        }]);

С немного CSS:

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

Затем в вашем основном файле HTML:

<div ui-view data-ajax-cloak></div>

Примечание: это не так сложно, как ng-cloak, поскольку это глобальное клоаковое, оно скрывает все, пока все запросы не будут завершены.

Ответ 9

Я пробовал все ответы выше и многое другое, без помощи. Моя (большая) страница будет мерцать при каждой загрузке. Моим решением было добавить это сразу после тега body:

<div style="display:flex" opacity=0>
  <status-progress></status-progress>
  <h3>Loading... </h3>
</div>

и обернуть все на странице:

<div class="loaded" style="opacity: 0" opacity=1> ... </div>

директива:

app.directive('opacity', opacity);
    function opacity($timeout) {
        return {
            link: function (scope, element, attrs) {
                var value = attrs.opacity;
                $timeout(function () {
                    element[0].style.opacity = value;
                },500);
            }
        }
    }

Чтобы страница выглядела "более гладкой", таблица стилей:

.loaded{
    transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
}

Таким образом, вы видите "Загрузка" в течение 1 секунды, пока все готовится.

Ответ 10

Поскольку ни один из этих ответов не дал мне желаемого результата, я выполнил все, что захотел, создав директиву, очень похожую на ng-cloak, но завернув код в $timeout, чтобы он подождал до конца $digest, чтобы удалить атрибут клоакинга и/или класс. Это был единственный способ, которым я смог по-настоящему скрыть привязки {{}} в браузере.

angular.directive('myCloak', function($timeout) {
  return {
    restrict: 'A',
    compile: function (element, attr) {
      $timeout(function () {
        attr.$set('myCloak', undefined);
        element.removeClass('my-cloak');
      });
    }
  };
});

И не забывайте, что для этого нового атрибута/класса вам нужно будет добавить пользовательское правило css:

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

Ответ 11

Использование исправления, рекомендуемого здесь, работает для меня...

https://github.com/opitzconsulting/jquery-mobile-angular-adapter/issues/167

CSS

.my-cloak {
  display: none  !important;
}

JS:

$scope.$on('$viewContentLoaded', function(){
    $('.my-cloak').removeClass('my-cloak');
});

HTML:

div(class="my-cloak")

Ответ 12

Используйте ngBind, когда ng-cloak недоступен.

<p ng-show="!isShow" ng-bind="isShow"></p>