Question

我在页面上有两个基本相同的按钮。按钮1检索字符串并将其输出到div。按钮2检索相同的字符串并将其输出到同一个div，但它也检索状态代码。每页重新加载只能按1个按钮。这是我的控制器的简化版本：

angular.module('myModule', []).controller('myController', [ '$scope', function($scope) {
  self = this;
  this.loaded = false;
  this.msg = '';

  this.getMessage = new Object(blah...);
  this.getMessage.success = function(data) {
    self.loaded = true;
    self.msg = data.msg;
    $scope.$apply(function() {
      self;
    });
  };

  this.getStatus = new Object(blah...);
  this.getStatus.success = function() {
    self.getMessage();
  };

  this.button1.click(function() {
    $.ajax(self.getMessage);
  });

  this.button2.click(function() {
    $.ajax(self.getStatus);
  });
}]);

我正在使用jQuery进行AJAX调用，因为我正在从jQuery迁移到Angular，并且正在从前到后工作以使所有jQuery被淘汰。到目前为止，我的页面看起来像这样：

<DOCTYPE html>
<html>
<head>
  <!-- js/css inclusions -->
</head>
<body>
  <div ng-controller='myController as ctrl'>
    <div ng-show='ctrl.loaded' ng-bind='ctrl.msg'></div>
  </div>
</body>
</html>

在页面加载时，我的div看起来像这样：

<div class='ng-hide'
 ng-show='ctrl.loaded'
 ng-bind='ctrl.msg'
 style='display: none'></div>

单击按钮1时，我的div变为：

<div class=''
 ng-show='ctrl.loaded'
 ng-bind='ctrl.msg'
 style=''>Message Here.</div>

单击按钮2时，我的div变为：

<div class=''
 ng-show='ctrl.loaded'
 ng-bind='ctrl.msg'
 style='display: none'>Message Here.</div>

这个div不是我设计的，只是来自Angular的默认CSS来显示/隐藏内容。我的问题是：我做错了吗？是否存在某种我没有看到的范围问题？还有其他我没做的事（Angular方式）？

修改：将$scope服务注入我的控制器，但结果仍然相同。

Answer 1

由于HTTP调用是使用jQuery而不是使用Angular $http服务，因此Angular不知道您的loaded参数正在更改，因此不会更新视图。 / p>

将代码包含在$scope.$apply块中的成功回调中，如下所示，以便Angular知道在对params进行更改时需要更新视图范围。您还需要将$scope服务注入您的控制器。

this.getMessage.success = function(data) {
    $scope.$apply(function () {
        self.loaded = true;
        self.msg = data.msg
    });
};

此外，您应该使用$scope服务将params注入您的视图 - 这就是它的用途。

AngularJS ng-show为true但显示：none仍然存在

1 个答案: