angular ng show即使设置为true也会显示内容

看到这个plunker，我已经修改了您的代码，使其使用指令而不是controllerAs，因为它更好：）
我还嘲笑了一个后端调用，在1.5秒后解析了一个promise。

可能是您只是忘记了将表单添加到控制器的作用域（而不是$scope）中吗？因为这是我唯一要做的事情，让它发挥作用。

'use strict';
(function(angular) {
  angular.module('myApp', []);
  angular.module('myApp')
    .controller('SignupController', ['$q', '$timeout', function($q, $timeout) {
      var mv = this;
      mv.booleanSuccess = false;
      mv.feedbackSuccessMessage = null;
      mv.booleanError = false;
      mv.feedbackErrorMessage = null;
      mv.username = '';
      mv.password = '';
      mv.signUpHandler = function() {
        return $q(function(resolve, reject) {
          if(mv.username === '' || mv.password === '') {
            mv.booleanError = true;
            mv.feedbackErrorMessage = 'password and username are required';
            mv.booleanSuccess = false;
            mv.feedbackSuccessMessage = null;
            reject(mv.feedbackErrorMessage);
          } else {
            mv.booleanError = false;
            mv.feedbackErrorMessage = null;
            $timeout(function() {
              mv.booleanSuccess = true;
              mv.feedbackSuccessMessage = 'You are now logged in!';
              resolve(mv.feedbackSuccessMessage);
            }, 1500);  
          }
        });
      };
    }]);
  angular.module('myApp')
    .directive('signup', [function() {
      return {
        restrict: 'E',
        controller: 'SignupController',
        controllerAs: 'signupCtrl',
        templateUrl: './signup.template.html'
      };
    }]);
})(window.angular);

您应该将数据存储在$scope变量中，而不是this实例中。以下代码将起作用。

脚本

angular.module('myApp.signup', [])
    .controller('SignupController', ["$scope", "$http",
        function ($scope, $http) {
            $scope.booleanSuccess = false;
            $scope.feedbackSuccessMessage = null;
            $scope.feedbackErrorMessage = null;
            //Dette sker, når signup-knappen klikkes (ng-click)
            $scope.signupButton = function () {
                var username = $scope.username;
                var password = $scope.password;
                $http.post('http://localhost:8080/MomondoProjectServer/api/flightinfo/createUser/' + username + '/' + password)
                    .success(function (response, status, headers, config) {
                        $scope.username = "";
                        $scope.password = "";
                        console.log(response);
                        $scope.booleanSuccess = true;
                        $scope.feedbackSuccessMessage = response.info + response.username;
                    }).error(function (response, status, headers, config) {
                        $scope.feedbackErrorMessage = "Failed to create user: '" + $scope.username + "'. Please try again.";
                        console.log($scope.feedbackErrorMessage);
                    });
            };
        }
    ]);

HTML

<div ng-controller="SignupController as ctrl" >
        <div class="alert alert-success" ng-show="booleanSuccess"> 
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <div>{{feedbackSuccessMessage}}</div>
        </div>
        <div class="alert alert-warning" ng-show="feedbackErrorMessage">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <div>{{feedbackErrorMessage}}</div>
        </div>
</div>

您可能需要两样东西：

1） 双向绑定-以便在"booleanSuccess"或"feedbackErrorMessage"更改时显示警报消息。

2） 只绑定变量一次，这样当您在"booleanSuccess"或"feedbackErrorMessage"变量中收到任何值时，您就会显示它，并且除非您进行任何DOM操作，否则该警报消息将永远保留在页面上。

如果你想要第一件事，那么看看@VVK给出的答案。原因-只有具有"$scope"的变量才能获得双向绑定功能。请参阅-https://docs.angularjs.org/guide/scope.不要混淆$scope和scope的一般含义（在javascript或angularJS中）$作用域是一个服务，需要注入控制器内部。

如果你想要第二件事，那么有两种方法（可能更多）：

i） 再次用$scope注册变量，但要像这样写HTML：

              <div class="alert alert-success" ng-show="ctrl.booleanSuccess"> 
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    <div>{{::feedbackSuccessMessage}}</div>
                </div>
                <div class="alert alert-warning" ng-show="ctrl.feedbackErrorMessage">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    <div>{{::feedbackErrorMessage}}</div>
                </div>

ii）确保您的HTML部分在服务器调用完成后进入DOM。正如你提到的使用ngRoute，所以最简单的方法是-当你声明你的routeprovider在特定位置显示这个部分时，然后连同模板、控制器等属性一起，写另一个属性"resolve"。请通过-https://docs.angularjs.org/api/ngRoute/provider/$routeProvider。为解析对象创建一个类型为function的新属性。您可以使用$q进行延迟承诺，从resolve的函数返回此承诺，并在收到服务器数据时解析此承诺。然后将此服务器数据作为自变量发送到deferred.resolve（）方法中。

示例-

$routeProvider.when(someurl,{
   templateUrl : your partial's url,
   controller : SignupController,
   resolve : {
     mydata : function($q){
       var deferred = $q.defer();
            $http.post('http://localhost:8080/MomondoProjectServer/api/flightinfo/createUser/' + username + '/' + password)
                    .success(function (response, status, headers, config) {
                        angular.extend(resolve,{successData:true})
                        deferred.resolve(response); //important
                    }).error(function (response, status, headers, config) {
                        angular.extend(resolve,{successData:false})
                        deferred.resolve(response); // important
            });
     }
   }
});

现在将resolve的"mydata"注入控制器。如果它的successData为true或false，请检查控制器，并相应地设置变量-booleanSuccess或feedbackErrorMessage。

这里的要点是，只有在"resolve"中的promise得到解析后，HTML部分才会加载到DOM中。

ii）方法可以通过许多其他方式实现，比如使用ng if或ng switch或ng include，但resolve属性是我最喜欢的。

此外，我建议简单地用$scope注册变量，并享受双向绑定的乐趣。

注意-不要认为控制器的变量（或"this"属性）包含HTML中的引用，它们并没有。AngularJS中带有$scope的双向绑定的唯一方式。

希望这有帮助，其实不想给出这么长的答案。

您的数据源很可能存在问题。以下工作：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div ng-app="myApp">
    <h2>Something</h2>
    <div ng-controller="SignupController as ctrl">
        <div class="alert alert-success" ng-show="ctrl.booleanSuccess">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <div>{{ctrl.feedbackSuccessMessage}}</div>
        </div>
        <div class="alert alert-warning" ng-show="ctrl.feedbackErrorMessage">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <div>{{ctrl.feedbackErrorMessage}}</div>
        </div>
        <button ng-click="ctrl.signupButton()">Sign up</button>
    </div>
</div>
<script>
    angular.module('myApp', [])
      .controller('SignupController', ["$q", function ($q) {
          var self = this;
          self.booleanSuccess = false;
          self.feedbackSuccessMessage = 'Blah blah';
          self.feedbackErrorMessage = null;
          //Dette sker, når signup-knappen klikkes (ng-click)
          self.signupButton = function () {
              var username = self.username;
              var password = self.password;
              $q.when({
                  info: 'Logged in',
                  username: 'User'
              })
                .then(function (response) {
                    self.username = "";
                    self.password = "";
                    console.log(response);
                    self.booleanSuccess = true;
                    self.feedbackSuccessMessage = response.info + response.username;
                });
          };
      }]);
</script>