Question

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

这是一个类似的问题:( AngularJS : ng-show usage），但我在许多其他地方看到过的解决方案似乎对我不起作用。这似乎是一个相当标准的程序。最初，我认为这只是一个范围问题，但即使全局变量尝试也不起作用。这可能是因为视图没有响应全局变量的变化而更新。我还在学习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

您需要在使用this时将该变量添加到控制器上下文（controllerAs），然后将其与控制器别名Ctrl.intFlag一起使用。另外我会说从控制器中移除$ scope依赖，这对于混合$scope＆amp;而言是没有意义的。 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 2

您需要拥有一个控制器上下文变量，例如＆＃39; self＆＃39;：

<强>控制器

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 3

您没有将intFlag附加到范围。

$scope.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似乎不适用于全局变量

4 个答案: