Question

在我的应用程序中，我通过Angular的http服务发出get请求，并在视图中循环返回的数据以显示无序列表。但问题是，即使数据在获取请求之后可用，它也不会在页面上消失。似乎是CSS风格的问题，但不知道如何解决它。我想在一个引导程序面板中显示unorder列表作为正文。

下面是控制器内部用于设置数据的角度代码

$http.get('/messages').success(function(data) {
         console.log("Messages are "+data);
         $scope.records=data;
     });

这是html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
    <title>jQuery Bootstrap News plugin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link rel="stylesheet" href="/libs/css/bootstrap.min.css"/>  
    <link rel="stylesheet" href="/libs/css/font-awesome.min.css"/>  
    <link rel="stylesheet" href="/libs/css/custom.css"/>  
    <script src="/libs/js/jquery-3.0.0.min.js" type="text/javascript"></script>
    <script src="/libs/js/newsbox.min.js" type="text/javascript"></script>
    <script src="/libs/js/angular.min.js" type="text/javascript"></script>
    <script src="/libs/js/main.js" type="text/javascript"></script>

</head>

<body ng-app="mean" ng-controller="MainCtrl">
    <br/>

    <div class="container">
      <div class="row">
        <div class="col-md-6">

          <div class="panel panel-default">
            <div class="panel-heading">
                <span class="glyphicon glyphicon-list-alt"></span><b> What you wanna do before you die ...</b>
            </div>
            <div ng-cloak class="panel-body">
              <div class="row">
                <div class="col-xs-12">                 
                    <ul class="demo1">                    
                        <li class="news-item" ng-repeat="item in records">                    
                         <table cellpadding="4">                         
                            <tr>
                            <td >
                             <img  class="img-circle" width="60" 
                                  ng-src="/images/{{($index+11) % 10}}.png"/>
                            </td>
                            <td ng-cloak>
                                {{$index+1}}. {{item.username}} 
                            </td>
                            </tr>                             
                         </table>                        
                        </li>                     
                    </ul>                    
                </div>
              </div>
            </div>            
            <div class="panel-footer"></div>              
           </div>
        </div>          
    </div>

        <div class="row">
  <div  class="col-md-2 col-md-offset-1 ">
    <form  name="messageForm" novalidate="novalidate" ng-submit="onSubmit()" id="message-box">
      <div class="form-group">
       <textarea required  ng-model="formModel.message" 
                 style="background-color:#ffffe6;border:double 4px orange;border-radius: 0.5em;"                        rows="3" cols="50" id="message" placeholder="Write your message and press enter..">          </textarea>      

          <button class="btn btn-primary" type="submit">Shoot it</button>
        </div>  
        <p ng-cloak class="help-block" ng-show="formModel.nameError">Looks like you forgot to mention your name !!!</p>
        <p ng-cloak class="help-block" ng-show="formModel.messageEmpty">Really you don't wanna do anything before you die !!! </p>
        <p ng-cloak class="help-block" ng-show="formModel.messageTooLong">You are trying to do too many things buddy, just 150 characters !!! </p>
   </form>
 </div>            
        </div>  


</div>

<script type="text/javascript">
    $(function () {
        $(".demo1").bootstrapNews({
            newsPerPage: 12,
            autoplay: true,
            pauseOnHover:true,
            direction: 'up',
            newsTickerInterval: 4000,
            onToDo: function () {
                //console.log(this);
            }
        });

    });
</script>


</body>

</html>

当我通过chrome dev工具检查时，数据存在于该无序列表中，数据存在但在某种程度上无法在引导程序面板中正确显示。

见图片

我注意到在通过开发工具检查时，无序列表底部有一个未定义的元素。有什么想法会出错吗？

面板主体是空的

Answer 1

为什么[ul]标签样式设置为“height：0px; overflow-y：hidden”？ - 这会隐藏你的内容

您还可以将ng-cloak移动到div.panel-body到div.row并将其从子td中删除

-

延迟bootstrapNews绑定

$(function(){
   if ($('.panel-body[ng-cloak]').length > 0)
       return window.setTimeout(arguments.callee, 10);

   $(".demo1").bootstrapNews({...});
});

Answer 2

我认为你应该编写一个指令，用于在完成ng-repeat时获得回调，这是一个更好的解决方案，而不是任何“延迟”策略。

可以帮助您完成我在代码中的操作 - 使用指令发出渲染完成事件：

dashboard.directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit(attr.onFinishRender);
                });
            }
        }
    }
});

在控制器中我保留了事件监听器：

    $scope.$on('dataLoaded', function(ngRepeatFinishedEvent) {
        // your code to add bootstrapNews binding
    });

在html方面，我称之为：

<div class="add_tenant_name" ng-repeat="tenant in tenants" on-finish-render="dataLoaded">
    // more divs
</div>

ng-repeat元素没有显示出来

2 个答案: