Angularjs нг-шоу не работает

Я пытаюсь отобразить содержимое div на основе ответа от службы $http. Вызов AJAX работает нормально и здесь не проблема. Однако я не могу обновить переменную контроллера, которую я хотел бы (intFlag) получить желаемое поведение. Я думал, что создание глобальной переменной решит проблему, хотя я не хотел этого делать.

Вот аналогичный вопрос: ( AngularJS: использование ng-show), но решение, которое я видел во многих других местах, похоже, не работает для меня. Это похоже на довольно стандартную процедуру. Сначала я думал, что это просто проблема с областью действия, но даже попытка глобальной переменной не работает. Это может быть потому, что представление не обновляется в ответ на изменения глобальных переменных. Я все еще изучаю 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>
Источник

4 ответа

Решение

Вам нужно добавить эту переменную в контекст контроллера (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) {
        });
    };
});
Источник

У вас должна быть переменная контекста контроллера, такая как "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">
Источник

Ты не прикрепляешься intFlag в рамках.

$scope.intFlag = 1;
Источник

Вклад Панкаджа Паркера (который я видел в другом месте, но до сих пор не до конца понял) решил проблему.

Следующие изменения кода получают желаемое поведение.

<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>
Источник
Другие вопросы по тегам