Problèmes de lecteur vidéo angulaire avec des données asynchrones et `this.config` dans le contrôleur

Question

J'utilise le lecteur vidéo Videogular pour Angular. Le code HTML ressemble à ceci:

<div ng-controller="ShowController as controller" class="videogular-container"> 
    <videogular vg-theme="controller.config.theme.url"> 
    <vg-media vg-src="controller.config.sources" vg-tracks="controller.config.tracks" vg-native-controls="true"></vg-media> 
    </videogular> 
</div> 

Dans le contrôleur le code ressemble à ceci pour lire ma vidéo qui est stocké dans Firebase Stockage:

app.controller('ShowController', ['$sce', function($sce) { 

    this.config = { 
    preload: "auto", 
    sources: [ 
     {src: $sce.trustAsResourceUrl("https://firebasestorage.googleapis.com/v0/b/myFirebaseApp.appspot.com/o/videos%2Fen%2Fkingfisher.webm?alt=media&token=b4840120-e531-4699-a757-4e0d999ce9d1"), type: "video/webm"} 
    ], 
    theme: { 
     url: "http://www.videogular.com/styles/themes/default/latest/videogular.css" 
    } 
    }; 

}]); 

Cela fonctionne très bien, aussi longtemps que je veux seulement jouer une vidéo. Mais pour sélectionner dynamiquement à partir d'un tableau de vidéos, j'ai écrit ceci:

app.controller('ShowController', ['$scope', '$firebaseStorage', '$sce', function($scope, $firebaseStorage, $sce) { 

    var ref = firebase.database().ref(); 

    var obj = $firebaseObject(ref.child($routeParams.id)); 

    obj.$loaded(
    function(data) { 
     console.log("Loaded!") 
     console.log(data === obj); 
     $scope.wordObject = data; 
     console.log($scope.wordObject.videos[0].videoURL); 
     console.log($scope.wordObject.videos[0].videoMediaFormat); 

     this.config = { 
     preload: "auto", 
     sources: [ 
      {src: $sce.trustAsResourceUrl($scope.wordObject.videos[0].videoURL), type: "video/" + $scope.wordObject.videos[0].videoMediaFormat} 
     ], 
     theme: { 
      url: "http://www.videogular.com/styles/themes/default/latest/videogular.css" 
     } 
     }; 

    }, 
    function(error) { 
     console.log("Error: ", error) 
    }); 

    }]); 

Le videoURL et videoMediaFormat journal très bien. Mais ni la source vidéo ni le thème ne se chargent dans la vue HTML. Le problème semble être que le déplacement this.config a changé l'objet auquel fait référence this. Que fait this.config? Est-ce que je peux lier this au contrôleur en utilisant call ou apply?

Puis?

Answer 1

I figured it out:

app.controller('ShowController', ['$scope', '$firebaseObject', '$sce', function($scope, $firebaseObject, $sce) { 

    // Create Firebase reference 
    var ref = firebase.database().ref(); 

    var obj = $firebaseObject(ref.child($routeParams.id)); 
    $scope.wordObject = obj; 

    var controller = this; 

    obj.$loaded(
    function(data) { 
     console.log(data === obj); 
     $scope.wordObject = data; 

     // video player 
     controller.config = { 
     preload: "auto", 
     sources: [ 
      {src: $sce.trustAsResourceUrl($scope.wordObject.videos[0].videoURL), type: "video/" + $scope.wordObject.videos[0].videoMediaFormat}, 
     ], 
     theme: { 
      url: "http://www.videogular.com/styles/themes/default/latest/videogular.css" 
     } 
     }; 

    }, 
    function(error) { 
     console.log("Error: ", error) 
    }); 

    }]);