javascript - AngularJS在加载整个页面之前显示模型文本

下面的代码显示了加载整个页面之前的{{x.film}}。加载页面后，一切就完美了，{{x.film}}消失了。我需要删除它。

它来自这里：来自以下代码的<li ng-repeat="x in movies | filter:film | orderBy:'film'" style="list-style-type:none;"><a href="{{ x.param }}"><b>{{x.film}}</b></a></li>。

请参考所附的屏幕截图。

<div class="search-box">
  <div class="input-group-lg right-inner-addon" ng-app="myApp" ng-controller="movieCtrl">
    <i class="glyphicon glyphicon-search"></i>
    <input type="search" ng-model="film" ng-model-options="{debounce: 250}" class="form-control" placeholder="Search Films">
    <ul ng-show="film">
      <li ng-repeat="x in movies | filter:film | orderBy:'film'" style="list-style-type:none;"><a href="{{ x.param }}"><b>{{x.film}}</b></a></li>
    </ul>
  </div>
</div>

最佳答案

使用ng-cloak

<li ng-cloak ng-repeat="x in movies | filter:film | orderBy:'film'" style="list-style-type:none;"><a href="{{ x.param }}"><b>{{x.film}}</b></a></li>

还要将此添加到您的CSS：

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

根据AngularJS ngCloak文档：


  当浏览器加载此CSS规则时，所有带有ngCloak指令标记的html元素（包括其子元素）都将被隐藏。当Angular在模板编译期间遇到此指令时，它将删除ngCloak元素属性，从而使编译后的元素可见。


https://docs.angularjs.org/api/ng/directive/ngCloak

关于javascript - AngularJS在加载整个页面之前显示模型文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31814842/