Question

我试图解决一个让我的角度应用看起来很奇怪的问题。我有一个$ http.get来初始化模型。由于解决服务器需要几秒钟的时间，因此我想显示一个信息标记，直到完成为止。

然而，正在发生的事情是，在UI的其余部分完成更新之前，标签会被隐藏。

我已经尝试了基于谷歌搜索的各种方法，但到目前为止还没有成功。这是我目前的标记：

<div ng-controller="endCtrl" ng-show="model.groups.length > 0">
    <div ng-repeat="group in model.groups" ng-show="group.Endorsements.length > 0">
        <h3>{{group.Title}}</h3>
        <div ng-repeat="endorsement in group.Endorsements">
            <p>
                <span class="endorsement-name">{{endorsement.Name}}</span><span class="footnote" ng-show="endorsement.Role != null">, {{endorsement.Role}}</span>
            </p>
        </div>
    </div>
</div>

这是控制器：

app.controller( '@ViewBag.AngularController', function( $scope, $http, $q, $timeout ) {
    $scope.model = {
        groups: [],
    };

    $http.get( "/Home/GetEndorsements" )
    .then(
        function( resp ) {
            $scope.model.groups = resp.data;
            return $q.defer().resolve( true );
        },
        function( resp ) {
            $scope.model.groups = [];
            return $q.defer().resolve( true );
        }
    )
    .then( function( resp ) {
        $timeout;
    } )
} );

我包含对$ timeout的调用，因为我读到的内容表明在UI完成更新之前它不会运行。但是，再说一遍，那不起作用。

更新

我的问题是一个骨头错误的结果：＆＃34;请等待＆＃34;元素超出控制器的范围：

<p ng-show="model.groups.length <= 0">
    Initializing, please wait...
</p>
<div ng-controller="endCtrl">
    <div ng-show="model.groups.length > 0">

所以，当然，它上面的ng-show指令总是返回false，一旦将元素编译到DOM中就会隐藏它。

将项目移动到控制器的范围内解决了问题。

Answer 1

您可以看到plunker正常工作。

你应该尝试更多＆＃34;常规＆＃34;使用$ http。

的方式

我的控制器

$scope.model = {
        groups: [],
        gettingData: true,
    };

    $http.get( "data.json" )
    .success(function(resp){
        $scope.model.groups = resp.data;
        $scope.model.gettingData = false;
    }).error(function(resp) {
        $scope.model.groups = [];
        $scope.model.gettingData = false;
    });

我的观点

<body ng-app="myApp" ng-controller="myController">
    <span ng-show="model.gettingData">Loading !!!!!</span>
    <div ng-show="!model.gettingData">
        <div ng-repeat="group in model.groups" ng-show="group.Endorsements.length > 0">
            <h3>{{group.Title}}</h3>
            <div ng-repeat="endorsement in group.Endorsements">
                <p>
                    <span class="endorsement-name">{{endorsement.Name}}</span><span class="footnote" ng-show="endorsement.Role != null">, {{endorsement.Role}}</span>
                </p>
            </div>
        </div>
    </div>  
  </body>

告诉我它是否按预期工作。实际上你的逻辑似乎很好，但我对你使用$ http的方式感到有些困惑。

AngularJS：在UI更新期间显示/隐藏元素

1 个答案: