Question

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

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

然后在我的角度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将为false。然而，这会导致页面加载标记时显示给用户的消息会短暂呈现然后消失（显示我的期望） - 我做错了是什么导致了这种闪烁？

Answer 1

这是因为内容会一直呈现，直到角度检测到false为ShowMessgae然后隐藏它。

为了不显示内容，直到角度准备好＆＃34;说＆＃34;是true false还是ng-cloak您应该使用ShowMessgae。通过这种方式，直到有角度的'＃34;才知道＆＃34; ShowMessgae的值。然后，此时，角度已准备好显示（或不）内容，具体取决于<div ng-if="ShowMessgae" class="text-danger" ng-cloak> <p> <strong> Message displayed to User </strong> </p> </div>的值

keypress

Answer 2

添加ng-cloak，如下所示

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

内容简要渲染然后使用ng-if消失

2 个答案: