Angularjs 为什么这个ng show ng hide不起作用

我有一个简单的应用程序在AngularJS。我希望在发出AJAX请求时动态显示消息。不幸的是，它总是处于隐藏状态，我不知道为什么

HTML:

---

显示/隐藏逻辑错误。。。更改为：ng hide=“message”

---

首先，对$scope.$apply（）的调用是不必要的

如果从未显示

show

div，则表示

$scope.message=true未执行。如果未执行，则表示AJAX请求未成功，或者
$data.status===“success”
永远不会为真

调试代码，或添加console.log（）跟踪以检查变量的值，并查看执行了什么和没有执行什么。标准调试工作

另外，不要在数据变量前面加$。美元通常保留给angular提供的服务。
它不起作用的可能原因是，您正在子范围内创建一个新的范围属性，而不是像您预期的那样覆盖merchantListController范围中的
消息
属性

// The following assignment will create a 'message' variable 
// in the child scope which is a copy of the scope variable   
// in parent scope - effectively breaking two-way model binding.
$scope.message = true;

要解决此问题，请确保通过引用绑定到模型上的属性，而不是范围上的属性

HTML

<div ng-show="my.message">
   <h2>show</h2>
</div>

<div ng-hide="!my.message">
   <h2>Hide</h2>
</div>

解释

这样做之所以有效，是因为使用范围继承规则解析模型
my
。也就是说，如果当前作用域中不存在
my
，则在父作用域中搜索
my
，直到找到它，或者搜索在$rootScope处停止。找到模型后，
消息
属性将被覆盖
 
因为你犯了一个错误。。。
Because you did a mistake...

ng-show="message" and ng-hide="!message" both points to the same value..

Correct it as..
<div **ng-show="message"**>
    <h2>show</h2>
</div>

<div **ng-hide="message"**>
    <h2>Hide</h2>
</div>

//or you can do in your way as...

<div **ng-show="message"**>
    <h2>show</h2>
</div>

<div **ng-show="!message"**>
    <h2>Hide</h2>
</div

ng show=“message”和ng hide=“！message”都指向相同的值。。
更正为。。
显示
隐藏
//或者你可以用你自己的方式做。。。
显示
隐藏
你不需要这些。只需执行$scope.$parent.$message=true。正如前面的注释所说，这是因为您在子范围内，并且原始绑定是与父范围变量绑定的。然而，我相信它愚蠢的语言，没有一个共同的记忆为父母和孩子变量。它对我很有效，不需要提及ng控制器。这么疯狂的语言，我为此浪费了一天。不过，感谢所有宝贵的反馈
 所以，在花时间回答了一个2年的问题之后，我会在这里放一些东西

$scope.apply（）
是不必要的，可能会触发一个错误，说明apply已经在进行中。如果你做得对，你应该很少，或者永远不要调用这个函数。它的主要用途是，如果您使用第三方库，angular无法监视更改或查看它们的作用，并且您需要手动触发摘要周期

我建议初始化变量，使您的控制器看起来像这样（我还提取了对服务的http请求，并使用
然后
来处理响应和错误，因为
.success（）
已被弃用）：

您可以在这里找到一个有用的工具：
$scope。$digest（）函数迭代$scope对象及其子$scope对象（如果有）中的所有手表。当$digest（）迭代手表时，它会为每个手表调用value函数。如果value函数返回的值与上次调用时返回的值不同，则调用该手表的侦听器函数

只要AngularJS认为有必要，就会调用$digest（）函数。例如，在执行按钮单击处理程序之后，或者在AJAX调用返回之后（在执行了done（）/fail（）回调函数之后）

您可能会遇到一些特殊情况，AngularJS不为您调用$digest（）函数。您通常会通过注意到数据绑定没有更新显示的值来检测到这一点。在这种情况下，调用$scope.$digest（）应该可以工作。或者，您也可以使用$scope.$apply（）

您可以这样做：

HTML

<div ng-hide="message"> <h2>show</h2> <div>

<div ng-hide="!message"> <h2>Hide</h2> </div>

是否确定
$data.status===“success”
？如果您在CSP模式下使用AngularJS应用程序，则AngularJS文件中的CSS将不会加载，并且您必须在应用程序中包含缺少的CSS。发布模板的代码。如果scope message属性确实如屏幕截图所示为true，那么您发布的html代码可能不在控制器的范围内。也就是说，它不在这个控制器控制的HTML元素中。问题是我没有将ng控制器放在HTML中。但我想它会和路线控制器一起工作。知道吗？糟糕的是我没有把ng控制器放在html中。但我想它会和路线控制器一起工作。有什么想法吗？
$http({
    method: 'POST',
    url: global.base_url + '/merchant/list',
}).success(function($data) {

            $scope.message   = true;
    }).error(function($data) {
            $scope.message   = false;
    });

// The following assignment will create a 'message' variable 
// in the child scope which is a copy of the scope variable   
// in parent scope - effectively breaking two-way model binding.
$scope.message = true;

<div ng-show="my.message">
   <h2>show</h2>
</div>

<div ng-hide="!my.message">
   <h2>Hide</h2>
</div>

function merchantListController($scope, $http, $rootScope, $location, global) {

   // Initialize my model - this is important!
   $scope.my = { message: false };

   $http({
        method: 'POST',
        url: global.base_url + '/merchant/list',
    }).success(function($data) {

        if ($data.status === 'success') {
            $scope.merchants = $data.data;

            // modify the 'message' property on the model
            $scope.my.message   = true;
        }

    });
});

Because you did a mistake...

ng-show="message" and ng-hide="!message" both points to the same value..

Correct it as..
<div **ng-show="message"**>
    <h2>show</h2>
</div>

<div **ng-hide="message"**>
    <h2>Hide</h2>
</div>

//or you can do in your way as...

<div **ng-show="message"**>
    <h2>show</h2>
</div>

<div **ng-show="!message"**>
    <h2>Hide</h2>
</div

function merchantService($http) {
    function post() {
    return $http.get('localhost');
    //Just a dummy $http request, instead of yours.
    //return $http.post(global.base_url + '/merchant/list');
  }

    /*  this is rather implicit, but if you are doing a service like this, 
        you can keep the functions "private" and export an object, that  
        contains the functions you wish to make "public" */

    return {
      post: post
  };
}

function merchantListController($scope, merchantService) {
    /* Initialize the variable, so ng-show and ng-hide 
       have something to work with in the beginning
       rather then just being undefined. */

    $scope.message = false;

    // call the post from the function
    merchantService.post()
  .then(function (response) {

    /* The first then() will hold the response
       if the request was OK */

    console.log(response);
    $scope.merchants = response.data;

    /* Since this then() will be triggered on a successful request
       we are safe to say $scope.message should now be true. */

    $scope.message = true;
  })
  .then(function (error) {

    // The second one is for the failed request.

    console.error(error);
  });
}

var app = angular.module('myApp', []);
app.controller('merchantListController', merchantListController);
app.factory('merchantService', merchantService);

<div ng-hide="message"> <h2>show</h2> <div>

<div ng-hide="!message"> <h2>Hide</h2> </div>

$scope.message = true;


function merchantListController($scope, $http, $rootScope, $location, global) {
$http({
    method: 'POST',
    url: global.base_url + '/merchant/list',
}).success(function($data) {
    if ($data.status === 'success') {
        $scope.merchants = $data.data;

        $scope.$apply(function(){
            $scope.message = false;
            $scope.$digest();
        });
    }
});