Jquery AngularJS ng show为真，但display:无保留_Jquery_Css_Angularjs

Jquery AngularJS ng show为真，但display:无保留

jquery css angularjs

Jquery AngularJS ng show为真，但display:无保留,jquery,css,angularjs,Jquery,Css,Angularjs,我在一个页面上有两个按钮，它们的作用基本相同。按钮1检索字符串并将其输出到div。按钮2检索相同的字符串并将其输出到相同的div，但也检索状态代码。每页重新加载只能按下1个按钮。以下是我的控制器的精简版本： angular.module('myModule', []).controller('myController', [ '$scope', function($scope) { self = this; this.loaded = false; this.msg = '';

我在一个页面上有两个按钮，它们的作用基本相同。按钮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 class='ng-hide'
 ng-show='ctrl.loaded'
 ng-bind='ctrl.msg'
 style='display: none'></div>

在页面加载时，我的div如下所示：

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

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

这里有消息。

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

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

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

这里有消息。

这个div不是我设计的，只是Angular中用于显示/隐藏内容的默认CSS。我的问题是：我做错什么了吗？是否存在某种我没有看到的范围界定问题？还有什么我做得不对的（角度的方式）

编辑：将

$scope

服务注入我的控制器，但结果仍然相同。

由于HTTP调用是使用jQuery而不是Angular

$HTTP

服务进行的，Angular不知道加载的

参数正在更改，因此不会更新视图
将代码包装在下面的$scope.$apply
块中的成功回调中，以便Angular知道在您更改参数时需要更新视图范围。您还需要将$scope
服务注入控制器
this.getMessage.success = function(data) {
    $scope.$apply(function () {
        self.loaded = true;
        self.msg = data.msg
    });
};

此外，您应该使用$scope
服务将参数注入到您的视图中—这就是它的作用。
您问题中编辑的代码是您当前在控制器中得到的吗？如果是这样，用我提供的代码试一试（即：将参数设置移动到$apply
块中）。我将参数设置移动到$apply
块中，但结果仍然相同。。。按钮1显示消息，但按钮2不允许删除显示：none
。确定。可能是Angular的内部工作需要在$scope
服务上而不是在控制器本身上设置参数，以便在视图和控制器之间形成绑定。e、 g.：$scope.loaded
而不是this.loaded
。在您的视图中只需将其作为加载的
-您不需要$scope
前缀（ng show=“loaded”
）。将this.loaded
转换为$scope.loaded
，并使用ng show=“loaded”
仍然会得到相同的结果：/你能不能让我在JSFIDLE中演示一下，这样我就可以玩一玩了？