Ambito di applicazione a Macchina/angularJS richiesta HTTP GET

Io sono nuovo e del dattiloscritto angular.js e sto lottando con una richiesta http get.
Sto usando DefinitelyTyped per angolare tipo di definizioni.

Mio controller codice simile a questo:

module game.Controller {
    'use strict';

    export interface IGameScope extends ng.IScope {
        vm: GameCtrl;
    }

    export class GameCtrl {

        private bonus: any;
        private http: any;

        constructor($scope: IGameScope, $http: ng.IHttpService, $location: ng.ILocationService) { 
            $scope.vm = this;
            this.http = $http;
        }

        doBet() {
            this.http.get('http://localhost:9000/db').success(function(data: any, status: any) { 
                    this.bonus = data;
                }
            );
        }
    }

}

e il mio punto di vista come questo:

<button ng-click="vm.doBet()">bet</button>
<div><span>bonus: {{ vm.bonus }}</span></div>

l’associazione del modello funziona bene, quando si cambia il bonus variabile senza la richiesta http. Ma quando cerco di aggiornare il bonus variabile di successo la funzione di richiesta get, ottengo il seguente errore:

TypeError: Cannot set property 'bonus' of undefined

Come posso ottenere per aggiornare le variabili del successo di funzione?

Anche io gradirei qualche suggerimento, se non c’è un meglio/il modo più pulito o pratica per aggiornare i dati sulle richieste



4 Replies
  1. 10

    Questo può essere fatto facilmente utilizzando Dattiloscritto dell’espressione lambda:

    doBet() {
        this.http.get('http://localhost:9000/db').success(
            (data, status) => this.bonus = data
        );
    }
    • Avete qualche spiegazione più dettagliata su questo argomento? E. g. un motivo dobbiamo usare l’espressione lambda qui?
    • nel normale js si avrebbe ad esempio this.http.get('url').success(function(data, status) { ... });, così this non è visibile nel successo di funzione. la lamba, espressione, come mostrato sopra automaticamente compila var _this = this; this.http.get('url').success(function(data, status) { _this.member = "something"; });, così this è reso visibile nel campo di applicazione attraverso l’helper variabile _this. speranza che aiuta.
  2. 1

    this in this.bonus = data; in realtà si riferisce alla funzione di callback all’interno success.

    Invece si può fare come questo: $scope.vm.bonus = data;

    • questo non funziona, dal momento che $scope è visibile solo in funzione di costruzione e non in doBet() funzione.
    • Spostare doBet() nel tuo costruttore e dichiarare come un metodo di $scope: $scope.doBet = function() { ... };, o semplicemente passare $scope in doBet().
    • Delle 2 opzioni, vorrei preferibilmente spostare doBet all’interno del controller e dichiarare sull’ambito di applicazione.
  3. 1

    Si può mettere il metodo della funzione di costruzione per accedere a $ambito come questo:

    constructor($scope: IGameScope, $http: ng.IHttpService, $location: ng.ILocationService) {
        $scope.vm = this;
        this.http = $http;
    
        $scope.doBet = function() {
            this.http.get('http://localhost:9000/db').success(function (data: any, status: any) {
                $scope.bonus = data;
            });
        }
    }

    Qui è un tutorial sull’utilizzo di AngularJS con Dattiloscritto.

    • grazie, ho già letto questo tutorial. Ma è davvero la migliore pratica per definire tutti i ambito di applicazione le funzioni del controller? inoltre, sono vincolanti per l’ $scope.vm variabile per il mio controller istanza di omitte la necessità di legare ogni singola portata variabile per il mio controller variabili. quindi, IMHO, in questo caso, non ci sarebbe alcun miglioramento tramite l’associazione $scope.vm = this;.
    • Penso che sia davvero finita l’uccisione di utilizzare Dattiloscritto, complicato il JavaScript.
  4. 1

    Non ho usato la macchina, ma a me sembra che la chiusura/problema di ambito. Il successo di call back è in esecuzione in modo asincrono in modo che il valore di this è diversa. Provare vincolante la funzione di call-back con this.

    this.http.get('http://localhost:9000/db').success(angular.bind(this,
        function(data: any, status: any) {this.bonus = data;});
    • Questo non è necessario in dattiloscritto. Vedere 3×14159265 risposta.

Lascia un commento