2016-06-26 10 views
0

Ich habe eine Funktion in einem Controller und ich bin verwirrt, wie eine $ Scope-Variable innerhalb einer .then-Funktion aktualisiert wird.

Heres meine Funktion:

searchSpotify(query, $scope) { 
    this.Spotify.search(query,'track').then(function (data) { 
     console.log(data.tracks.items); // this is working 
     $scope.result = data; 
    }); 
} 

in dem Konsolenprotokoll erhalte ich diese Fehlermeldung:.

TypeError: Cannot set property 'result' of undefined 

Verwenden I $ Umfang irgendwie $ bewerben?

EDIT:

Hier ist die gesamte Steuerung für Kontext

(function() { 

    class SelectionController { 
     constructor(User, groupService, selectionService, songService, $scope, $routeParams, Spotify) { 
      this.groupId = $routeParams.groupId; 
      this.selectionId = $routeParams.selectionId; 
      this.groupService = groupService; 
      this.selectionService = selectionService 
       //this.selections = this.selectionService.getSelections(); 
      this.songService = songService; 
      this.searchResults; 
      this.$scope = $scope; 
      this.Spotify = Spotify 
     } 

     searchSpotify(query) { 
      this.Spotify.search(query, 'track').then(function(data) { 
       console.log(data.tracks.items); 
       $scope.result = data; 
      }); 
     } 

     addSong(name, artist, album) { 
      alert('called from selection controller'); 
      this.songService.addSong(this.selectionId, name, artist, album); 
     } 

     createSelection(name, description) { 
      this.selectionService.createSelection(this.groupId, name, description); 
     } 

     deleteSelection(selection) { 
      this.selectionService.deleteSelection(selection); 
     } 
    } 

    angular.module('songSelectionApp') 
     .controller('SelectionController', SelectionController); 

})(); 
+1

verwenden sollten, wenn diese Funktion in einem Controller befindet, nicht Übergeben Sie die Variable $ scope an sie. – Noppey

+0

die von 'then' als einen anderen Bereich aufgerufene Funktion. Sie können die Pfeilfunktion verwenden, wenn Sie ES6 verwenden, oder 'bind()' – rpadovani

+0

, wenn ich die Variable $ scope nicht übergebe, bekomme ich den folgenden Fehler in der Konsole: "ReferenceError: $ scope ist nicht definiert" – Jcr

Antwort

2

speichern Bezug auf $ scope sein sollte:

searchSpotify(query) { 
     var $scope = this.$scope; 
     this.Spotify.search(query, 'track').then(function(data) { 
      console.log(data.tracks.items); 
      $scope.result = data; 
     }); 
    } 

Oder verwenden arrow functions:

searchSpotify(query) { 
     this.Spotify.search(query, 'track').then((data) => { 
      console.log(data.tracks.items); 
      this.$scope.result = data; 
     }); 
    } 

.bind(this) sollte auch funktionieren, wie andere Antworten vorschlagen.

In Bezug auf $scope.$apply: Sie müssen es nur, wenn Sie eine $scope außerhalb eines $digest, zum Beispiel ändern möchten, wenn Sie externe (nicht-Winkel-) Bibliotheken/Funktionen verwenden, wie WebSocket oder jquery Event-Listener. Untill Spotify ist ein Winkel Service/Fabrik - Sie brauchen nicht $scope.$apply

Von docs:

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries).

1
this.Spotify.search(query,'track').then(function (data) { 
    console.log(data.tracks.items); // this is working 
    this.result = data; 
}.bind($scope)); 

Sollte alles, was Sie wirklich brauchen werden. Sie sagen im Grunde den internen Rahmen, was this wirklich

+0

Ich nehme an, '$ scope' ist undefiniert. Ihr Beispiel funktioniert, wenn Sie '.bind (this. $ Scope)' –

+0

übergeben, musste ich .bind (this. $ Scope) verwenden, damit diese Option funktioniert – Jcr

1

Sie

this.Spotify.search(query,'track').then(function (data) { 
    console.log(data.tracks.items); // this is working 
    this.$scope.result = data; 
}.bind(this)); 
Verwandte Themen