AngularJS ng-show 是真的，但 display:none 仍然存在答案

【问题标题】：AngularJS ng-show is true but display:none remainsAngularJS ng-show 是真的，但 display:none 仍然存在
【发布时间】：2014-12-30 11:43:35
【问题描述】：

我在一个页面上有两个按钮，它们的功能基本相同。按钮 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 服务注入我的控制器，但结果仍然相同。

【问题讨论】：

标签： jquery css angularjs

【解决方案1】：

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

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

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

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

【讨论】：

您在问题中编辑的代码是您目前在控制器中获得的吗？如果是这样，请使用我提供的代码（即：将参数设置移动到 $apply 块中）。
我将参数设置移动到 $apply 块中，但结果仍然相同...按钮 1 显示消息，但按钮 2 不允许删除 display: none。
好的。可能是 Angular 的内部工作需要在 $scope 服务而不是控制器本身上设置参数，以便在视图和控制器之间形成绑定。例如：$scope.loaded 而不是 this.loaded。在您的视图中使用它作为简单的 loaded - 您不需要 $scope 前缀 (ng-show="loaded")。
将this.loaded 转换为$scope.loaded 并使用ng-show="loaded" 仍然给出相同的结果。 ://
你能在 jsfiddle 中演示一下吗？