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

我在ng show方面遇到了问题。 具体说明我的问题；我有一个系统，我想在其中创建一个用户。当您执行此操作时，我希望系统生成一个包含返回消息的框-特定于.success和.error。 我已经为这两种情况创建了to框，但是当它们被设置为true时，它们都不会显示

这是我的密码

Html

---

您应该将数据存储在

$scope

变量中，而不是

此

实例中。 下面的代码将起作用

脚本

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>

{{feedbackSuccessMessage}
{{feedbackErrorMessage}}

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

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

某物
{{ctrl.feedbackSuccessMessage}
{{ctrl.feedbackErrorMessage}
注册
angular.module（'myApp'，[]）
.controller（'SignupController'，[“$q”，函数（$q）{
var self=这个；
self.booleansucture=false；
self.feedbackSuccessMessage='Blah Blah'；
self.feedbackErrorMessage=null；
//Dette sker，når注册knappen klikkes（ng点击）
self.signupButton=函数（）{
var username=self.username；
var password=self.password；
$q.when({
信息：“已登录”，
用户名：“用户”
})
.然后（功能（响应）{
self.username=“”；
self.password=“”；
控制台日志（响应）；
self.booleansucture=true；
self.feedbackSuccessMessage=response.info+response.username；
});
};
}]);

看到这一点，我修改了您的代码以使用指令而不是controllerAs，因为这样更好：）
我还通过在1.5秒后解析承诺来模拟后端调用

是否您只是忘记了将表单添加到控制器的作用域（而不是$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);

---

您可能需要两件事：

1） 双向绑定-以便在“BooleanSucture”或“feedbackErrorMessage”更改时显示警报消息

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

如果你想要第一件事，那么看看@VVK给出的答案。原因-只有带有“$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>

现在将resolve的“mydata”注入控制器。检查控制器的successData是否为true或false，并相应地设置变量-BooleanSucture或feedbackErrorMessage

这里的要点是，只有在“resolve”中的承诺得到解决后，才会将HTML部分加载到DOM中

ii）方法可以通过许多其他方式完成，例如使用ng if或ng开关或ng include，但resolve属性是我最喜欢的

此外，我建议您只需使用$scope注册变量，并享受双向绑定的乐趣

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

---

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

当你显示{{ctrl.feedbackErrorMessage}时，它是否显示任何值？请设置一个JSFIDLE，你是否添加了

ng app=“myApp.signup”

或引导了它？为什么你不使用$scope变量，在你的controllerIt中不显示“{ctrl.feedbackErrorMessage}”因为div框根本没有显示（包括ng show）。这不是问题所在。使用

this

很好，这是使用controllerAs的主要原因之一。这就是我的想法，因为我们学校要求我们使用“this”和“self”，所以我更喜欢这样做：-）谢谢你的建议。你在成功处理程序中有一个console.log（response）。它的o/pWas是什么只是为了测试响应包含的内容-您可以忽略它。将所有内容添加到$scope会增加阅读/理解代码的难度。当你写它的时候可能不会，但是当你说6个月后你必须添加功能时，你的整个模板将充满神奇的变量，祝你好运找到一个$scope.$parent.$parent的变量，因为它只会工作…给你的控制器一个简单的名字，你知道变量分配到哪里了。谢谢。我正在尝试查看，但我似乎找不到解决我的问题的明显区别：-（你能发布服务器的响应吗？是的。这是我创建新用户时的响应；“Object{info:“you successfully registered”，username:“ladæææ”}）。如果这是你的意思，那么当创建该用户时，我希望“ng show=“ctrl.BooleanSucture”将显示，而不是隐藏，并包括我在此div中的.success调用中发出的消息：{{ctrl.feedbackErrorMessage}”“这有意义吗？好吧，我们看不到其他地方有错误，因为上面的代码工作得很好，只是从你的示例中稍微修改了一下。谢谢你的回答。你的示例所做的，几乎正是我希望它做的。你能更深入地理解你的意思吗？”“是否您只是忘记将表单添加到范围中

'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);

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

$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
            });
     }
   }
});