ng-show 似乎不适用于全局变量

Question

我正在尝试根据 $http 服务的响应显示 div 的内容。 AJAX 调用工作正常，不是这里的问题。但是，我无法更新我想要的控制器变量 (intFlag) 以获得所需的行为。我认为创建一个全局变量可以解决问题，即使我不想那样做。

这里有一个类似的问题：()，但是我在许多其他地方看到的解决方案似乎对我不起作用。这似乎是一个相当标准的程序。最初，我认为这只是一个范围问题，但即使是全局变量尝试也不起作用。这可能是因为视图没有根据全局变量的变化而更新。我还在学习 Angular.

<html ng-app="myapp">
<head>
<script type="text/javascript">
var intFlag = 0; 

var app = angular.module('myapp', []);
app.controller('AController', function ($scope, $http) 
{   //I've tried: var this.intFlag = 0; here already
    this.CreateUser=function()
    {   //scope changes here, right?
        $http({
        method: 'POST',
        url: 'some url', //pseudocode
        data: someData, //pseudocode
        headers: { 'Content-Type': 'application/x-www-form-urlencoded'} 
        }).then(function successCallback(response) 
            {   intFlag = 1; //global variable
                //Ideally I want to update a variable that is in the scope for the controller
            }, function errorCallback(response) {
        });
    };
});

</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5 /angular.min.js"></script>

</head>
<body ng-controller="AController as Ctrl">

<div>
<button type="button" ng-click="Ctrl.CreateUser()" >Create User</button>
<div ng-show="intFlag === 1">
    <p>Congratulations!</p>
</div>
</div>
</body>
</html>

Answer 1

您没有将 intFlag 附加到范围。

$scope.intFlag = 1;

Answer 2

您需要将该变量添加到控制器上下文 (this) 中，因为您正在使用 controllerAs，然后将其与控制器别名一起使用，例如 Ctrl.intFlag。另外，我会说从控制器中删除 $scope 依赖项，将 $scope 和 this 混合在一起是没有意义的。

标记

ng-show="Ctrl.intFlag"

代码

var app = angular.module('myapp', []);
app.controller('AController', function ($http) 
{
    var self = this;
    self.intFlag = intFlag;
    self.CreateUser=function()
    {   //scope changes here, right?
        $http({
        method: 'POST',
        url: 'some url', //pseudocode
        data: someData, //pseudocode
        headers: { 'Content-Type': 'application/x-www-form-urlencoded'} 
        }).then(function successCallback(response) 
            {   self.intFlag = 1;//global variable
                //Ideally I want to update a variable that is in the scope for the controller
            }, function errorCallback(response) {
        });
    };
});

Answer 3

您需要有一个控制器上下文变量，例如 'self':

控制器

app.controller('AController', function($scope, $http) { //I've tried: var this.intFlag = 0; here already
  var self = this;
  self.intFlag = 0;

  this.CreateUser = function() { //scope changes here, right?
    $http({
      method: 'POST',
      url: 'some url', //pseudocode
      data: someData, //pseudocode
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }).then(function successCallback(response) {
      self.intFlag = 1; //global variable
      //Ideally I want to update a variable that is in the scope for the controller
    }, function errorCallback(response) {});
  };
});

然后像这样在上下文中引用变量：

HTML

<div ng-show="Ctrl.intFlag === 1">

Answer 4

Pankaj Parker 的贡献（我在其他地方看到过，但仍然不完全理解）解决了这个问题。

以下代码更改可获得所需的行为。

<html ng-app="myapp">
<head>
<script type="text/javascript">
    var app = angular.module('myapp', []);
    app.controller('AController', function ($scope, $http) 
        {   this.intFlag = false; //new code
            this.CreateUser=function()
            {   var self = this; //new code
                $http({
                method: 'POST',
                url: 'some url',
                data: someData,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded'} 
                }).then(function successCallback(response) 
                    {   self.intFlag = true; //new code
                    }, function errorCallback(response) {
                });
            };
    });

</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

</head>
<body ng-controller="AController as Ctrl">
<div>
    <button type="button" ng-click="Ctrl.CreateUser()" >Create User</button>
<div ng-show="intFlag">
    <p>Congratulations!</p>
</div>
</div>
</body>
</html>

ng-show 似乎不适用于全局变量

ng-show does not appear to work with global variables

javascript

angularjs

http

scope

ng-show