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

在您的包装HTML元素

中包含ng-cloak指令

<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;
}

Answer 2

在style=""中，您似乎遗漏了<span width:100px ng-cloak>。也许它破坏了ng-cloak指令。

Answer 3

这样做：

<span ng-cloak> ... </span>

或者：

<span ng-bind="userInfo.name | filterUserName"></span>

请注意！将“width：100％”放在“样式”属性

中

Answer 4

或者你可以这样做：

<span ng-bind-template="{{ userInfo.name }}">Your Default value</span>

我使用它并且始终有效，有时您可以使用某些默认值来填充文本内容，然后再显示任何内容，或者您​​可以将其留空。

Answer 5

使用ng-cloak而不是使用ng-cloak并且必须为ng-cloak编写css类，而不是使用ng-bind更强大。

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

ng-bind的另一个有趣特性是能够在上面的代码中加载数据之前设置默认值，我使用＆＃34;加载...＆＃34;如果你愿意，你也可以留空。 另外，您可以查看有角度的API文档https://docs.angularjs.org/api/ng/directive/ngBind