javascript - Angularjs:-在加载之前暂时删除双花括号符号的显示

Question

嗨，我是 angularjs 的新手。在尝试在代码中实现 angularjs 时，我遇到了一个问题。

下面是我的代码:-

<div class = 'search-icon'>
        <div class = 'iconoverlay hidden-phone' ng-click="clickSearch()"></div>
        <input type='search' id="mainSearch" placeholder='Search TV' ng-model="searchQuery.text" search-auto-complete>
        <div ng-show="showInvalid == true" style="display: block ; margin-top: -8px;color: red;" ng-cloak>Invalid search text</div>
      </div>
      <div class="icon"></div>
    </div>

 <div class='select-language' ng-controller="AppController">
        <a class='btn' style="width: 170px;" id='selectLanguage' ng-controller="AppController" timezone ng-cloak>{{city['city']}}<span class='arrow'></span></a>
      </div>

 <div ng-switch-when="on" class='username'>
          <span width:100px ng-cloak>{{userInfo.name | filterUserName}}</span>
          <div class="btn-group">
            <div class="btn dropdown-toggle moreDropdownTrigger" id="usernameDropdown"></div>

          </div>
        </div>
      </div>

根据上面的代码，我已经实现了 ng-cloak 来防止 Angular html 模板在应用程序加载时以原始形式短暂显示在浏览器中。

下面是图片:-

请帮我解决一下。谢谢

Answer 1

包括ng-cloak包装 HTML 元素中的指令

<div ng-cloak>{{ myObject.item }}</div>

并在您的 css 文件中包含以下 CSS 规则:

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