AngularJS在加载整个页面

Question

下面的代码显示加载整个页面之前的{{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>

Answer 1

使用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

Answer 2

将ng-cloak添加到您的ng-app div。

Answer 3

您是从控制器中取出电影吗？看起来问题可能是您在加载模板时未初始化电影。如果是这种情况，那么在实际加载视图/控制器之前，应考虑使用解析来获取数据。如果您使用的是ui路由器，则可以在以下状态执行此操作：

.state('yourStateName', {
    ...
    resolve: {
        movies: function($http) {
            return $http.get(....);
        }
    }
});

并在您的控制器中，只需注入电影，如

.controller('yourControllerName', [..., 'movies', function(..., movies) {
    $scope.movies = movies;
});

Answer 4

在您的控制器中，您可以将相关代码包装在

中

if(x.param) {
 // your code
}

这将确保仅在为x定义了params时才触发代码。我猜它是为了重新加载页面的中间状态。