Question

这是我的角色

<script>
    (function(){
      var app=angular.module("my_post_module",[]);
      app.controller("post_controller",function($http,$scope){
      $scope.getPost=function(id)
      {
        if(id>0)
        {
            $http.post("GetPostController","{\"id\":\""+id+"\"}").then(function(response){
                $scope.adminPost=response.data.adminpostdata;
            },function(error){

            });
        }
    }
});
})();

我的ng-repeat

<div>
        <div ng-repeat="items in adminPost">
            <div>
                <h1>{{items.name}}</h1>
            </div>
            <div>
                <p>{{items.body}}</p>
            </div>
            <div>
                <h5>{{items.work}}</h5>
            </div>
            <div>
                <image ng-src="GetPostImage?requestFileIndex=1&requestId={{items.postId}}" style="width:50%;height:30%;"/>
                <image ng-src="GetPostImage?requestFileIndex=2&requestId={{items.postId}}" style="width:50%;height:30%;"/>
                 <video width="320" height="240" controls>
                      <source ng-src="GetPostImage?requestFileIndex=3&requestId={{items.postId}}">
                </video> 
            </div>
        </div>
    </div>

问题在于，无论何时刷新页面或首次加载页面几秒钟，它都会显示为{{items.name}} {{items.works}}等等，然后它会自动消失，它正在运行正确，但每当我刷新页面或第一次加载页面时，看到这一点非常烦人。我正在尝试使用ng-show，但它也无效。

Answer 1

您需要ngCloak。

ngCloak指令用于防止浏览器在加载应用程序时以原始（未编译）形式短暂显示AngularJS html模板。

将此指令添加到元素中，以防止在编译之前显示{{ expression }}。

<div>
    <h1 ng-cloak>{{items.name}}</h1>
</div>
<div>
    <p ng-cloak>{{items.body}}</p>
</div>
<div>
    <h5 ng-cloak>{{items.work}}</h5>
</div>

Answer 2

您可以使用ng-cloak或ng-bind。

您可以在角度表达式的根div上添加ng-cloak

<div ng-cloak>
    <div ng-repeat="items in adminPost">
        <div>
            <h1>{{items.name}}</h1>
        </div>
        <div>
            <p>{{items.body}}</p>
        </div>
        <div>
            <h5>{{items.work}}</h5>
        </div>
        <div>
            <image ng-src="GetPostImage?requestFileIndex=1&requestId={{items.postId}}" style="width:50%;height:30%;"/>
            <image ng-src="GetPostImage?requestFileIndex=2&requestId={{items.postId}}" style="width:50%;height:30%;"/>
             <video width="320" height="240" controls>
                  <source ng-src="GetPostImage?requestFileIndex=3&requestId={{items.postId}}">
            </video> 
        </div>
    </div>
</div>
<style>
 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-         cloak {
display: none !important;
}
</style>

Answer 3

在你的CSS添加

<div *ngIf="validateFormControl('email')" 
  class="alert alert-danger">
  error message
</div>

<div *ngIf="validateFormControl('password')" 
      class="alert alert-danger">
   error message
</div>

然后在你的代码中你可以添加ng-cloak指令。例如，

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

多数民众赞成！

Answer 4

如果ng-cloak不是一个选项，您也可以使用ng-bind

执行此类操作

<div>
  your content here <p ng-bind="items.works"></p>
</div>

使用ng-bind通常比插值指令

更好

如果a，最好使用ngBind而不是{{expression}} 浏览器在其原始状态下暂时显示模板在AngularJS编译之前。由于ngBind是一个元素属性，它在页面加载时使绑定对用户不可见。

请参阅此SO post和docs了解详情

Answer 5

如果ng-cloak不是一个选项（例如，如果在加载应用程序后动态发生），并且ng-bind不是一个选项（例如，如果引起问题的未编译内容不是文本），则退后一步是直接隐藏元素，直到angular通过ng-class进行了第一次遍历。

示例HTML：

<div class="hidden-on-init"
     ng-class="{'visible': true}"></div>

示例CSS：

.hidden-on-init:not(.visible) {
  display: none;
}

对于我来说，这在特定情况下很有用：无论何时元素初始化，CSS动画都会快速播放，即使它应该以完全动画的状态开始。

这是由于Angular暂时以错误状态显示幻像未编译元素而没有其is-expanded类引起的。这会导致动画在每次添加元素时针对其默认状态已扩展的任何元素播放。

示例HTML：

 <node-expander class="hidden-on-init"
                ng-class="{'visible': true}"
                is-expanded="item.getIsExpanded()"
                on-expand="item.toggleIsExpanded()"></node-expander>

更少的示例：

node-expander {
  &.hidden-on-init:not(.visible) {
    display: none;
  }

  svg {
    transform: rotate(0);
    transition: transform .2s;
    &.is-expanded { // passed through in code not shown
      transform: rotate(90deg);
    }
  }
}

如何隐藏角度表达式，直到它初始化

5 个答案: