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

【问题标题】：AngularJS condition in ng-show not workingng-show 中的 AngularJS 条件不起作用
【发布时间】：2014-05-16 18:22:00
【问题描述】：

我有一个简单的应用程序，它有一个控制器和一个 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="true" 以确保 DIV CSS 是正确的，当我这样做时，DIV 会正确显示。谁能看到我在这里遗漏了什么？

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

【问题讨论】：

标签： angularjs

【解决方案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>

【讨论】：

呃 - 我要么是个大白痴，要么是瞎了 :) 谢谢！！