Ansicht ist nicht nach dem $ http async Anruf aktualisiert, wenn Controller_Syntax

Ich bin anglejs lernen und ich versuche, die controllerAs Syntax zu verwenden, wie ich von Java Hintergrund bin und dies würde mehr Sinn für mich machen, aber ich habe Probleme zu verstehen die Digest-Schleife.

Ich versuche, einen HTTP-Aufruf zu tun und die Variable im Controller zu aktualisieren. Wenn ich $ scope im Controller verwende, wird die Ansicht aktualisiert, nachdem die Daten empfangen werden, aber wenn ich die controllerAs-Syntax verwende, wird die Ansicht nicht aktualisiert .

Codepen mit $ scope Syntax

http://codepen.io/eternal15/pen/BzANEw?editors=1111

<html> 
    <head> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script> 
    </head> 
    <body ng-app="Test" ng-controller="testCtrl"> 
    {{output}} 
    <button ng-click="onClick()">Test</button> 
    </body> 

</html> 
//JS FILE 
angular.module("Test", []).controller('testCtrl', ['$scope','$http', function($scope, $http){ 
    $scope.output = "Loading"; 
    $scope.onClick = function(){ 
    console.log('clicked'); 
    $http.get('http://jsonplaceholder.typicode.com/posts').then(function(data){ 
     $scope.output = "worked!!"; 
     console.log($scope.output); 
    }) 
    } 
}]);

Codepen mit controllerAs Syntax (View nicht aktualisiert)

http://codepen.io/eternal15/pen/yJKoaZ?editors=1011

<html> 
    <head> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script> 
    </head> 
    <body ng-app="Test" ng-controller="testCtrl as test"> 
    {{test.output}} 
    <button ng-click="test.onClick()">Test</button> 
    </body> 

</html> 
//JS File 
angular.module("Test", []).controller('testCtrl', ['$http', function($http){ 
    this.output = "Loading"; 
    this.onClick = function(){ 
    console.log('clicked'); 
    $http.get('http://jsonplaceholder.typicode.com/posts').then(function(data){ 
     this.output = "worked!!"; 
     console.log(this.output); 
    }) 
    } 
}]);

ich über die controllerAs Syntax gelesen haben und Ich denke es geht Fügen Sie das Objekt (Test in obigem Beispiel) unter scope hinzu und somit sind die Variablen über das (Test-) Objekt zugänglich.

Die Digest-Schleife wird also nach dem $ http-Aufruf ausgeführt, da die Ansicht im ersten Beispiel mit $ scope aktualisiert wird. Da die Digest-Schleife ausgeführt wird, sollte der Objekttest im zweiten Beispiel auch aktualisiert werden, oder?

Auch habe ich versucht, $ Umfang und tun $ Umfang zu injizieren. $ Apply() und dass auch nicht funktioniert und es gab mir diesen Fehler

Error: [$rootScope:inprog] http://errors.angularjs.org/1.5.2/$rootScope/inprog?p0=%24digest

Ich mag würde wissen, was ich tue, falsch . Obwohl ich wieder das $ scope-Format verwenden könnte, würde ich gerne wissen, ob ich etwas falsch mache, oder sollte ich andere Anweisungen hinzufügen, um die Variablen zu beobachten und die Werte manuell zu aktualisieren.

Vielen Dank im Voraus

Quelle

2016-07-21 Sriram Thiagarajan

this eine andere Bedeutung innerhalb Funktion hat. Weisen Sie einer Variablen this zu und verwenden Sie sie. Versuchen Sie:

angular.module("Test", []).controller('testCtrl', ['$http', function($http){ 
    var vm = this; 
    vm.output = "Loading"; 
    vm.onClick = function(){ 
    console.log('clicked'); 
    $http.get('http://jsonplaceholder.typicode.com/posts').then(function(data){ 
     vm.output = "worked!!"; 
     console.log(vm.output); 
    }) 
    } 
}]);

Quelle

2016-07-21 08:49:08

Danke. Es hat funktioniert –

Dies ist wegen Javascripts Verschlüsse. Wenn Sie eine neue Funktion definieren, erstellen Sie einen neuen Bereich, daher hat das Schlüsselwort this für jeden neuen Bereich eine neue Bedeutung.

Um dies zu lösen, definieren Sie den Controller-Bereich oben auf Ihrem Controller. Übliche gebräuchliche Namen sind entweder vm oder $ctrl.

Ihr Controller würde dann somehting wie folgt aussehen:

angular.module("Test", []).controller('testCtrl', ['$http', function($http){ 
    var $ctrl = this; 
    $ctrl.output = "Loading"; 
    $ctrl.onClick = function(){ 
    console.log('clicked'); 
    $http.get('http://jsonplaceholder.typicode.com/posts').then(function(data){ 
     $ctrl.output = "worked!!"; 
     //$scope.$apply(); 
    }) 
    } 
}]);

Quelle

2016-07-21 08:50:26

Danke für die Antwort. Es funktionierte –

Ansicht ist nicht nach dem $ http async Anruf aktualisiert, wenn Controller_Syntax

Antwort

Verwandte Themen