使用 ng-if 短暂呈现然后消失的内容

Question

我的页面上有一些内容被包裹在 ng-if 中，如下所示：

            <div ng-if="ShowMessgae" class="text-danger">
                <p>
                    <strong>
                        Message displayed to User
                    </strong>
                </p>
            </div>

然后在我的 angular js 控制器中我有以下内容：

function MyController($scope, $q, notifyHelper) {
    openAjaxLoaderGif();

    $scope.ShowMessgae = false;

    MyService.getVarsFromSession().then(function (result) {
       // some code removed for brevity
       if(some coditional) {
        $scope.ShowMessgae = true;
       }

        }, function (data, failReason, headers) {
            notifyHelper.error("Error has occurred - try again");
        })
    })
    .finally(function () {
        closeAjaxLoaderGif();
    });
};

我将 ShowMessage 的值设置为 false，只有满足特定条件时它才为真。在大多数情况下，ShowMessage 将为假。然而，这会导致页面加载时，向用户显示的标记消息短暂呈现然后消失（以显示我的期望）-我做错了什么导致了这种闪烁吗？

Answer 1

像下面一样添加ng-cloak

<div ng-if="ShowMessgae" class="text-danger" ng-cloak>
   <p>
     <strong>
         Message displayed to User
     </strong>
   </p>
 </div>

Answer 2

发生这种情况是因为内容一直呈现到 AngularJS 检测到 ShowMessgae 是 false，然后将其隐藏。

为了在 angular 准备好之前完全不显示内容 "say" 无论 ShowMessgae 是 true 还是 false 你应该使用 ng-cloak。这样，直到 AngularJS "knows" ShowMessgae 的值才会显示内容。然后，此时，框架已准备好显示（或不）内容，具体取决于ShowMessgae

的值

<div ng-if="ShowMessgae" class="text-danger" ng-cloak>
    <p>
        <strong>
            Message displayed to User
        </strong>
    </p>
</div>

使用 ng-if 短暂呈现然后消失的内容

Content briefly rendering then disappearing using ng-if

javascript

angularjs

angularjs-directive

angular-ng-if