2016-06-30 14 views
2

Ich versuche, den Inhalt eines div basierend auf der Antwort von einem $ http-Dienst anzuzeigen. Der AJAX-Anruf funktioniert gut und ist nicht das Problem hier. Ich kann jedoch die Controller-Variable, die ich möchte (IntFlag), nicht aktualisieren, um das gewünschte Verhalten zu erhalten. Ich dachte, das Erstellen einer globalen Variable würde das Problem lösen, obwohl ich das nicht wollte.Angularjs ng-show funktioniert nicht

Hier ist eine ähnliche Frage: (AngularJS : ng-show usage), aber die Lösung, die ich an vielen anderen Orten gesehen habe, scheint nicht für mich zu arbeiten. Dies scheint ein ziemlich standardmäßiges Verfahren zu sein. Anfangs dachte ich, es wäre nur ein Problem mit dem Oszilloskop, aber selbst der Versuch mit der globalen Variablen funktioniert nicht. Dies liegt möglicherweise daran, dass die Ansicht nicht als Reaktion auf Änderungen an globalen Variablen aktualisiert wird. Ich lerne immer noch 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> 
+0

Winkelausdrücke werden immer auf dem Oszilloskop ausgewertet. Auf globale Variablen kann nicht zugegriffen werden. Und sie sollten auf jeden Fall vermieden werden. Außerdem hat JavaScript Boolesche Werte. Verwenden Sie einen booleschen Wert für einen Wahr/Falsch-Wert. Keine Nummer. –

+0

Danke für die Informationen über globale Variablen. Man hatte mir gesagt, ich solle sie in eckiger Haltung vermeiden, aber niemals warum. –

+0

Sie sollten sie überall vermeiden. Die Verwendung globaler Variablen führt zu Spaghetti-Code, bei dem jede mögliche Codezeile diesen globalen Zustand möglicherweise lesen oder ändern kann, was es sehr schwierig macht, Fehler zu diagnostizieren, und Tests, die schwer zu schreiben sind. Siehe http://stackoverflow.com/questions/10525582/why-are-global-variables-considered-bad-practice –

Antwort

2

Sie müssen diese Variable hinzufügen Kontext an den Controller (this), wie Sie controllerAs verwenden es dann mit Controller Alias ​​wie Ctrl.intFlag. Zusätzlich würde ich sagen, dass die $ Scope-Abhängigkeit vom Controller entfernt wird, was nicht sinnvoll ist, um zusammen $scope & this zu mischen.

Markup

ng-show="Ctrl.intFlag" 

-Code

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

@JBNizet war auf dem Weg zu aktualisieren ,, Ich aktualisierte .. Vielen Dank für den Kopf, –

1

Sie sind nicht intFlag an Umfang zu befestigen.

$scope.intFlag = 1; 
+1

Dies wird nicht funktionieren, da er die ControllerAs-Syntax verwendet. – jbrown

+0

@jbrown Ja, es wird funktionieren. controllerAs stellt nur den Controller selbst in den Bereich.Alle Ausdrücke werden weiterhin für den Bereich ausgewertet, und der Bereich ist immer noch vorhanden. –

+0

@ JBNizet - du hast Recht ... Ich sehe normalerweise nicht die 2 so gemischt – jbrown

2

Sie benötigen einen Controller Kontextvariable wie 'Selbst' haben:

-Controller

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

Und dann verweisen die Variable auf den Kontext wie folgt aus:

HTML

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

Pankaj Parker Beitrag (was ich hatte an anderer Stelle gesehen, aber immer noch nicht ganz verstanden) gelöst Das Thema.

Die folgenden Codeänderungen erhalten das gewünschte Verhalten.

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

Es hat keinen Sinn zu beantworten Ihre eigene Frage mit der gleichen Antwort wie die von jemand anderem, besonders wenn Sie einen Fehler in der Antwort machen und ihn falsch machen. –