Question

我有一个带控制器和div的简单应用程序，应该根据变量标志有条件地显示。

这是HTML：

<div class="col-lg-12" ng-controller="PrimaryTeamReportCtrl">
    <p class="lead">{{model.reportTitle}} - {{model.reportDate}}</p>
    <p>{{loading}}</p>
</div>
<div class="splash" ng-show="loading">
    <i class="fa fa-spinner fa-spin fa-5x"></i>
</div>
<script type="text/javascript" src="TeamReportApp.js"/>

这是控制器：

var app = angular.module('TeamReportApp', []);
app.controller('PrimaryTeamReportCtrl', function($scope, $http) {
    $scope.model={};
    $scope.loading=false;
    $scope.loadPrimaryTeamReport = function() {
        $scope.loading=true;
        $http.get('/primary_team_report_ws').success(function(data) {
            $scope.model = data;
            console.log("Data: "+ JSON.stringify($scope.model));
            $scope.loading=false;
        }).error(function() {
            alert("LoadPrimaryTeamReport AJAX call failed");
            $scope.loading=false;
        });
    };
    $scope.loadPrimaryTeamReport();
});

我在HTML上显示加载变量{{loading}}以进行调试，并且设置正确。然而，div永远不会出现。

我测试过只是把ng-show =＆＃34; true＆＃34;确保DIV CSS是正确的，当我这样做时，DIV正确显示。谁能看到我在这里失踪的东西？

谢谢！亚历山德罗·费鲁奇

Answer 1

ng-show在控制器html元素之外

<div class="col-lg-12" ng-controller="PrimaryTeamReportCtrl">
    <p class="lead">{{model.reportTitle}} - {{model.reportDate}}</p>
    <p>{{loading}}</p>
</div> <!-- here -->
<div class="splash" ng-show="loading">
    <i class="fa fa-spinner fa-spin fa-5x"></i>
</div>

试试这个：

<div class="col-lg-12" ng-controller="PrimaryTeamReportCtrl">
        <p class="lead">{{model.reportTitle}} - {{model.reportDate}}</p>
        <p>{{loading}}</p>

    <div class="splash" ng-show="loading">
        <i class="fa fa-spinner fa-spin fa-5x"></i>
    </div>
</div>

ng-show中的AngularJS条件不起作用

1 个答案: