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

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

看到这个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 3

您可能有两件事需要：

1）2路绑定 - 以便在“布尔成功”时显示警报消息。或者＆＃39; feedbackErrorMessage＆＃39;变化。

2）仅将变量绑定一次，以便在“booleanSuccess”中收到任何值时。或者＆＃39; feedbackErrorMessage＆＃39;变量，您显示它并且该警报消息将永久保留在页面上，除非您执行任何DOM操作。

如果您想要第一件事，请查看@VVK给出的答案。原因 - 只有＆＃39; $范围的变量＆＃39;获得双向绑定功能。见 - https://docs.angularjs.org/guide/scope。并且不要将$ scope与范围的一般含义混淆（在javascript或angularJS中）。 $ scope是一项服务，需要在控制器内部注入。

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

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在特定位置显示这个部分，然后连同模板，控制器等属性时，写下另一个属性＆＃39; resolve＆＃39 ;。请通过 - https://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider。为resolve对象创建一个类型为function的新属性。您可以使用$ q来制定延迟承诺，从解析函数返回此承诺，并在收到服务器数据时解决此承诺。然后将此服务器数据作为参数发送到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
            });
     }
   }
});

现在注入解决方案＆＃39; mydata＆＃39;进入你的控制器。检查控制器是否为successData为true或false，并相应地设置变量 - booleanSuccess或feedbackErrorMessage。

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

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

另外，我建议只使用$ scope注册你的变量，并通过双向绑定获得乐趣。

注意 - 不要认为控制器的变量（或者这个＆＃39;属性）包含HTML中的引用，它们不是。在AngularJS中使用$ scope的唯一方式。

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

Answer 4

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

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

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

4 个答案: