AngularJS ng-cloak не предотвращает мерцание кода в Mean.js

Это касается среды MEAN.js. У меня есть операторы if в моем представлении Angular, чтобы проверить, есть ли у меня какие-либо результаты из моей базы данных. Если есть результаты то я их показываю, если нет то показываю сообщение об ошибке.

У меня проблема с мерцанием кода Angular: когда страница загружается, на долю секунды я вижу сообщение об ошибке, а затем сразу же отображаются результаты из моей базы данных. Директива ng-cloak не работает.

Код

Ниже я включил очень простой код Angular, который должен прояснить, что я делаю.

Контроллер:

// Return a specific person from the database.
this.person = Persons.get({
    personId: $stateParams.personId
});

Вид:

<div ng-if="personCtrl.person.length">
    <!-- Show person's details here... -->
</div>

<div ng-if="!personCtrl.person.length" ng-cloak>
    <p>Sorry, person could not be found.</p>
</div>

Я попытался добавить директиву ng-cloak, которая не работает. MEAN.js также использует Bootstrap и предоставляет несколько классов CSS, но независимо от того, какие из них я добавляю, ни один из них не работает:

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

Вкратце: я могу добавить директиву ng-cloak И класс CSS ng-cloak, но они не работают. Я могу добавить style="display:none;", но это скроет сообщение об ошибке, даже если оно должно отображаться.


javascript angularjs meanjs
person Tom    schedule 28.04.2015    source источник
comment
Мне проще использовать ng-bind и ng-bind-html.   -  person Kevin B    schedule 28.04.2015
comment
похоже, что перед созданием ajax вы устанавливаете personCtrl.person=[], а затем ответ на вызов ajax делает его нулевым   -  person Pankaj Parkar    schedule 28.04.2015
comment
Похоже, проблема в том, что personCtrl.person.length на самом деле ложно за долю секунды до завершения обещания Persons.get. Использование ng-cloak не исправит это. Вы можете изначально установить для personCtrl.person.length значение false, прежде чем выполнять получение.   -  person ribsies    schedule 28.04.2015
comment
Насколько рано загружается ваш angular.js? Если вы загрузите angular в нижней части вашей индексной страницы, html будет отображаться нормально, потому что ng-cloak просто еще не существует. Попробуйте переместить угловой выше в порядке загрузки, то есть в голову. Кроме того, я запускаю ng-cloak для тега html, а не по отдельности, но это просто предпочтение.   -  person Owen    schedule 28.04.2015
comment
@Owen: AngularJS — это самый первый скрипт, загруженный в мой <head>. Я также добавил ng-cloak к моему тегу <body>.   -  person Tom    schedule 28.04.2015
comment
Другой вариант — создать тег загрузки, который начинается с запроса и завершается, когда возвращается обещание. Я использую это в сочетании с ngProgress для отличного визуального индикатора загрузки.   -  person Owen    schedule 28.04.2015
comment
Опять же, ваша проблема не имеет ничего общего с ng-cloak. Это переменная проблема. ng-cloak предотвращает появление таких вещей, как {{someVariable}}, до того, как они будут скомпилированы. Ваш код работает правильно, как вы его написали.   -  person ribsies    schedule 28.04.2015
comment
@ribsies: ng-cloak также предотвращает отображение страницы до того, как такие вещи, как ng-if, смогут оценить. Вот почему я пытался получить всю информацию, чтобы дать обоснованный ответ.   -  person Owen    schedule 28.04.2015
comment
@ribsies относительно вашего первого комментария, вы имеете в виду установить для него значение true, прежде чем я сделаю получение, вместо того, чтобы установить для него значение false? Потому что это имеет смысл, и я только что попробовал (пробовал оба способа), но, к сожалению, это не работает. Как будто код в моем контроллере обрабатывается недостаточно быстро, и я понятия не имею, как это исправить в приложении MEAN.js.   -  person Tom    schedule 28.04.2015
comment
ng-cloak предотвращает вывод необработанных выражений. он не мог предотвратить отображение вашего ложного утверждения ng-if; если бы это было так, как бы он узнал, когда правильно отображать его, а когда нет? в вашем коде выражение оценивалось, оно просто не дало ожидаемого результата. ng-cloak не взаимодействует с обещаниями или $http / $resource, чтобы определить, что результат может измениться позже....   -  person Claies    schedule 29.04.2015
comment
проблема здесь в том, что вы возвращаете обещание, и вы не учитываете этот факт в своем коде.   -  person Claies    schedule 29.04.2015
comment
Попробуйте вместо этого переключиться на ng-show.   -  person c0deNinja    schedule 29.04.2015

Ответы (2)


arrow_upward
3
arrow_downward

Может быть, это то, что вы ищете?

<div ng-show="personCtrl.person.length">
    <!-- Show person's details here... -->
</div>

<div ng-hide="personCtrl.person.length" ng-cloak>
    <p>Sorry, person could not be found.</p>
</div>
person MikeVervloet    schedule 27.10.2015

arrow_upward
0
arrow_downward

Ваша проблема не в ng-cloak, а в задержке сервера.

Решения состоят в том, чтобы управлять состояниями либо с помощью jQuery внутри директивы (рекомендуется), либо внутри контроллера.

Здесь я продемонстрировал этот принцип в очень грубой форме http://plnkr.co/edit/sSVHl5AXkltjvBrpKR4s.

app.controller('HomePage', function($scope, $timeout){
    $scope.user = false;
    var el = angular.element('#user-data-loading-zone');
    // modelling 1000ms latency from the server
    $timeout(function(){
        $scope.user = {name: 'John'};
        if($scope.user) {
            el.removeClass('loading');
            el.addClass('success');
            el.html('Success data was loaded => ' + $scope.user.name);
        } else {
            $scope.state = 'Error unable to load';
        }
    }, 1000);
});

Обычно штаты...

  1. Загрузка...
  2. Успех! или Ошибка!

Используйте jquery и css, чтобы сгладить анимацию. Используйте директивы, чтобы выделить приведенный выше код и сделать его пригодным для повторного использования.

person Mwayi    schedule 06.05.2015