Question

我正在制作一个非常简单的应用程序：

我想通过ajax调用加载数组，然后显示它。在加载期间，我想要一个GIF动画。

<!DOCTYPE html>
<html ng-app="thresholdApp">
<head lang="fr">
    <script src="/lib/angular.min.js"></script>
    <script src="/bin/js/thresholds/angular/controller/controller.js"></script>
    <script src="/bin/js/thresholds/angular/service/webservice.js"></script>
</head>
<body ng-controller="thresholdCtrl as ctrl" class="text-center">
    <div class="row">
        <div class="column small-6 small-centered">
            <table>
                    <tr ng-show="loading">
                        <td colspan="3" class="text-center">
                            <img src="/res/img/greyLoadingWheel.gif" alt="loading"/>
                            {{loading}}
                        </td>
                    </tr>
                    <tr ng-repeat="t in thresholds">
                        <td>{{t.brand.name}}</td>
                        <td class="text-center">{{t.stock}}</td>
                        <td class="text-center">{{t.threshold}}</td>
                    </tr>
            </table>
        </div>
    </div>
</body>
</html>

使用该控制器：

thresholdApp = angular.module("thresholdApp", []);

thresholdApp.controller("thresholdCtrl",function($scope, webService) {

    $scope.loading = true;
    webService.post("stock/threshold/check", {}, function(result) {
        $scope.thresholds = result.stockThresholds;
        $scope.loading = false;
    });
});

它运行良好，表格按预期填充了ajax响应，但带有ng-show指令的tr不起作用。奇怪的是，另一方面，{{loading}}已更新，并被false替换。

ng-show似乎什么都不做，而且总会显示tr。

有什么想法吗？

修改

ng-show改变ng-if有效。但有谁知道为什么ng-show在这里不起作用？

Answer 1

如评论中所述，当设置display: none指令时，似乎错误与<tr>中的属性ng-show/hide相关。

使用ng-if指令可以有效地从DOM中删除它并按预期工作。

由于某些原因，angular不会设置他的css类。

如角度文档中所述，修复程序是添加：

<link rel="stylesheet" href="/lib/angular-csp.css"/>

简单的ng-show指令不起作用

修改

1 个答案: