angular ng-show 确实显示内容甚至设置为 true

Question

我在使用 ng-show 时遇到了问题。指定我的问题；我有一个系统，我想在其中创建一个用户。当您这样做时，我希望系统生成一个带有 return 消息的框 - 特定于 .success 和 .error。我已经为这两种情况创建了框，但是 none 在它们应该设置为 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

您应该将数据存储在 $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>

Answer 2

您的数据源很可能有问题。以下作品：

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

Answer 3

看到这个 plunker，我已经修改了您的代码以使用指令而不是 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);

Answer 4

可能有两件事是您想要的：

1) 2 种方式绑定 - 以便在 'booleanSuccess' 或 'feedbackErrorMessage' 发生变化时显示警报消息。

2) 仅绑定变量一次，这样当您收到 'booleanSuccess' 或 'feedbackErrorMessage' 变量中的任何值时，您将显示它并且该警告消息将永远保留在页面上，除非您执行任何操作DOM 操纵。

如果你想要第一件事，那么请看@VVK 给出的答案。原因 - 只有带有“$scope”的变量才能获得双向绑定能力。参见 - https://docs.angularjs.org/guide/scope。并且不要将 $scope 与范围的一般含义混淆（在 javascript 或 angularJS 中）。 $scope 是一个服务，需要注入到controller里面。

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

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 部分在您的服务器 call/s is/are 完成后进入 DOM。正如您提到的使用 ngRoute 一样，最简单的方法是当您声明您的路由提供者以在特定位置显示此部分时，然后连同模板、控制器等属性，编写另一个属性 'resolve'.请通过 - https://docs.angularjs.org/api/ngRoute/provider/$routeProvider。为解析对象创建一个新的属性类型函数。您可以使用 $q 做出延迟承诺，return 这个承诺来自解析函数，并在收到服务器数据时解决这个承诺。然后将此服务器数据作为参数发送到 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 是真还是假，并相应地设置变量 - booleanSuccess 或 feedbackErrorMessage。

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

ii) 方法可以通过许多其他方式完成，例如使用 ng-if 或 ng-switch 或 ng-include，但解析属性是我的最爱。

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

注意 - 不要认为控制器的变量（或 'this' 属性）包含 HTML 中的引用，它们没有。在 $scope.

中 AngularJS 中的 2 种方式绑定的唯一方式

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

angular ng-show 确实显示内容甚至设置为 true

angular ng-show does show content even set to true

html

javascript

frontend

dom

angularjs