javascript - Angular ng-show 即使设置为 true 也会显示内容

Question

我在使用 ng-show 时遇到问题。明确我的问题；我有一个系统，我想在其中创建用户。当您执行此操作时，我希望系统生成一个带有返回消息的框 - 特定于 .success 和 .error。我已经为这两种情况创建了框，但是当它们应该设置为 true 时，这些框都没有显示。

这是我的代码。

HTML。

<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>
                </div>

Javascript。

angular.module('myApp.signup', [])


    .controller('SignupController', ["$http", function ($http) {


            var self = this;
    self.booleanSuccess = false;
            self.feedbackSuccessMessage = null;
            self.feedbackErrorMessage = null;

            //Dette sker, når signup-knappen klikkes (ng-click)
            self.signupButton = function () {
                var username = self.username;
                var password = self.password;

                $http.post('http://localhost:8080/MomondoProjectServer/api/flightinfo/createUser/' + username + '/' + password)
                        .success(function (response, status, headers, config) {
                            self.username = "";
                            self.password = "";
                            console.log(response);
                            self.booleanSuccess = true;
                            self.feedbackSuccessMessage = response.info + response.username;
                        }).error(function (response, status, headers, config) {
                            self.feedbackErrorMessage = "Failed to create user: '" + self.username + "'. Please try again.";
                            console.log(self.feedbackErrorMessage);
                });
            };

        }]);

Answer 1

查看此plunker ，我修改了您的代码以使用指令而不是controllerAs，因为它更好:)
我还通过在 1.5 秒后解决 promise 来模拟后端调用。

您是否只是忘记将表单添加到 Controller 的范围(而不是 $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);