Pourquoi Videogular place-t-il la source vidéo sur controller.config au lieu de $ scope?

Question

J'ai une configuration de base de lecteur vidéo Videogular pour lire des vidéos de Firebase Storage. Dans la vue HTML cela fonctionne:

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

Dans le contrôleur cela fonctionne:

var ref = firebase.database().ref(); // Create Firebase reference 
var obj = $firebaseObject(ref.child($routeParams.id)); // get the record with the key passed in from the URL 

var controller = this; // controller refers to the controller object 

obj.$loaded(// wait until the async data loads from the remote Firebase 
    function(data) { 
    // video player 
    controller.config = { // provides an object to the controller 
     preload: "auto", 
     sources: [ 
     // My Firebase video 
     {src: $sce.trustAsResourceUrl($scope.wordObject.videos[0].videoURL), type: "video/" + $scope.wordObject.videos[0].videoMediaFormat}, 
     // The Videogular test videos 
     {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"}, 
     {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.webm"), type: "video/webm"}, 
     {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.ogg"), type: "video/ogg"} 
     ], 
     theme: { 
     url: "http://www.videogular.com/styles/themes/default/latest/videogular.css" 
     } 
    }; 
    }, 
    function(error) { 
    console.log("Error: ", error) 
    }); 

Tout fonctionne, pour jouer une vidéo. Maintenant, je veux accéder dynamiquement à des tableaux de vidéos par thème. Par exemple, l'utilisateur clique pour voir toutes mes vidéos de chat ou clique sur un autre bouton pour voir toutes mes vidéos de chien. Je les URL Firebase de stockage sur les $scope et ng-repeat imprime les URL dans la vue:

<div class="row"> 
    <div class="col-sm-12 col-md-12 col-lg-12 text-center"> 
    <h3>{{currentTheme}}</h3> 
    <div> 
     <div ng-repeat="video in currentVideos"> 
     {{video.videoURL}} 
     </div> 
    </div> 
    </div> 
</div> 

Cela fonctionne très bien aussi. Donc, pour faire tourner une série de lecteurs vidéo avec toutes mes vidéos de chat que je viens de faire un ng-repeat avec un nouveau lecteur vidéo pour chaque vidéo, avec le vg-src venant de la $scope:

<div class="row"> 
    <div class="col-sm-12 col-md-12 col-lg-12 text-center"> 
    <h3>{{currentTheme}}</h3> 
    <div> 
     <div ng-repeat="video in currentVideos"> 

     <div ng-controller="MyController as controller" class="videogular-container"> 
      <videogular vg-theme="controller.config.theme.url"> 
      <vg-media vg-src="{{video.videoURL}}" vg-native-controls="true"></vg-media> 
      </videogular> 
     </div> 

     </div> 
    </div> 
    </div> 
</div> 

qui ne fonctionne pas . L'erreur est Error: [$parse:syntax], ce qui signifie qu'il y a une erreur de syntaxe Angular. L'erreur de syntaxe disparaît lorsque je change le vg-src retour à vg-src="controller.config.sources":

<div class="row"> 
    <div class="col-sm-12 col-md-12 col-lg-12 text-center"> 
    <h3>{{currentWord}}</h3> 
    <div> 
     <div ng-repeat="video in currentVideos"> 

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

     </div> 
    </div> 
    </div> 
</div> 

qui fonctionne. Le problème est que vg-src="controller.config.sources" fonctionne mais vg-src="{{video.videoURL}}" ne fonctionne pas. Pourquoi ne peut pas vidéo source vidéo de la $scope?

J'ai essayé de mettre mes sources vidéo de $scope sur controller.config dans le contrôleur mais cela n'a jamais fonctionné. Devrais-je essayer de le faire à nouveau demain? (Il est tard et je deviens confus essayant de comprendre pourquoi je ne peux pas mettre mes sources vidéo du $scope sur controller.config dans le contrôleur.)

Answer 1

J'ai écrit la question avant que je suis allé au lit et me suis réveillé avec (ce que j'espère est) la réponse. {{video.videoURL}} insère les URL des vidéos. controller.config.sources insère un objet avec beaucoup de choses. Je vais essayer de faire un tableau d'objets configurés et voir ce qui se passe!

...

Oui, cela a fonctionné! J'ai écrit un tutorial for a Videogular minimum install, en utilisant le $scope au lieu de controller.config. Je ne comprends pas pourquoi le fonctionnaire How To Start tutorial utilise controller.config au lieu du $scope.

...

je peux obtenir une vidéo à jouer de mon tableau de vidéos de chat lorsque l'utilisateur clique sur « Vidéos Cat », mais je ne peux pas ng-repeat pour faire tourner toutes les vidéos du tableau.

Dans le contrôleur lorsque l'utilisateur clique sur le bouton "Vidéos Cat" le gestionnaire accède à la série de vidéos Cat sur Firebase Storage, itère à travers le tableau avec forEach, pour chaque vidéo dans le tableau, il crée une variable pour la videoSource et une autre variable pour le format de fichier vidéo (videoSourceType), puis crée un videoObject avec un tableau de sources et un thème, puis place le videoObject dans le tableau $ scope.videoObjects.

$scope.videoObjects = []; 
    $scope.showVideosOfTheme = function() { 
    theme.videos.forEach(function(video) { // iterate through the array of videos 
      var i = 0; 
      var videoSource = $scope.currentVideos[i].videoURL; // set the video source 
      var videoSourceType = $scope.currentVideos[i].videoMediaFormat; // set the video format 
      var videoObject = { // make a video object 
      preload: "auto", 
      sources: [ 
       {src: $sce.trustAsResourceUrl(videoSource), type: "video/" + videoSourceType}, 
      ], 
      theme: { 
       url: "http://www.videogular.com/styles/themes/default/latest/videogular.css" 
      } 
      }; 
      $scope.videoObjects.push(videoObject); 
      i++; 
     }); 
}; 

Dans la vue HTML itère ng-répétition à travers le réseau de scope.videoObjects $ et fdor chaque objet vidéo tourne un nouveau lecteur vidéo Videogular en utilisant le thème et les sources. Cela ne fonctionne pas et le message d'erreur est Erreur: [$ parse: syntaxe], en d'autres termes, une erreur de syntaxe Angular.

<div ng-repeat="video in videoObjects" class="videogular-container"> 
    <videogular vg-theme="{{video.theme.url}}"> 
    <vg-media vg-src="{{video.sources}}" vg-native-controls="true"></vg-media> 
    </videogular> 
</div> 

Je continuerai à travailler dessus!