Angularjs ng-show не работает

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

Вот аналогичный вопрос: (AngularJS : ng-show usage), но решение, которое я видел во многих других местах, похоже, не работает для меня. Это похоже на довольно стандартную процедуру. Первоначально я думал, что это просто проблема с областью, но даже попытка глобальной переменной не работает. Это может быть связано с тем, что представление не обновляется в ответ на изменения глобальных переменных. Я все еще участвую в Угловом.

<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>

источник

2016-06-30 Pablo Francesca

Угловые выражения всегда оцениваются по объему. Глобальные переменные недоступны для них. И их все равно следует избегать. Кроме того, JavaScript имеет логические значения. Используйте значение boolean для значения true/false. Не число. –

Спасибо за информацию о глобальных переменных. Мне велели избегать их угловатой, но никогда не было причин. –

Вы должны избегать их повсюду. Использование глобальных переменных приводит к коду спагетти, где каждая возможная строка кода может потенциально читать или изменять это глобальное состояние, что затрудняет диагностику ошибок и тесты трудно записывать. См. Http://stackoverflow.com/questions/10525582/why-are-global-variables-considered-bad-practice –

Вы должны добавить эту переменную в контроллер контекста (this), как вы используете controllerAs затем использовать его с псевдонимом контроллера как Ctrl.intFlag. Кроме того, я бы сказал, что удалить $ scope зависимости от контроллера, который не имеет смысла смешивать $scope & this вместе.

Markup

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) { 
     }); 
    }; 
});

источник

2016-06-30 19:45:16

@JBNizet был на пути к обновлению, я обновил .. Спасибо за головы, –

Вы не прикрепляете intFlag к области.

$scope.intFlag = 1;

источник

2016-06-30 19:45:09

Это не сработает, так как он использует синтаксис ControllerAs. – jbrown

@ jbrown Да, это сработает. controllerAs просто помещает сам контроллер в область действия.Все выражения по-прежнему оцениваются по объему, и область действия все еще существует. –

@JBNizet - вы правы ... Я просто не вижу 2 смешанных подобных – jbrown

Вы должны иметь переменный контекст контроллера, такие как 'я':

контроллера

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">

источник

2016-06-30 19:49:21 jbrown

-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>

источник

2016-06-30 20:17:21

Нет смысла отвечать ваш собственный вопрос с тем же ответом, что и тот, который задан кем-то другим, особенно если вы допустили ошибку в ответе и сделали его неправильным. –

ответ

Смежные вопросы