简短地呈现内容，然后使用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，并且只有在满足特定条件的情况下才为true。在大多数情况下，ShowMessage将为false。但是，这导致当页面加载显示给用户的标记消息时短暂呈现的消息，然后消失（以显示我的期望）-我做错了什么导致此闪烁吗？

Answer 1

这是因为将渲染内容，直到角度检测到该ShowMessgae内容false然后将其隐藏为止。

为了完全不显示内容，直到angular准备“说” ShowMessgae是true还是false应该使用为止ng-cloak。这样，直到角度“知道”的值时才显示内容ShowMessgae。然后，此时，angular准备显示（或不显示）内容，具体取决于的值ShowMessgae

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