Why does Videogular put the video source on controller.config instead of on the $scope?

Question

I have a basic Videogular video player setup to play videos from Firebase Storage. In the HTML view this works:

<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>

In the controller this works:

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)
  });

Everything works, to play one video. Now I want to dynamically access arrays of videos by theme. E.g., the user clicks to see all my cat videos or clicks another button to see all my dog videos. I have the Firebase Storage URLs on the $scope and ng-repeat prints out the URLs in the view:

<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>

That works great too. So to spin out a series of video players with all my cat videos I just have to make an ng-repeat with a new video player for each video, with the vg-src coming from the $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>

That doesn't work. The error is Error: [$parse:syntax], meaning there's an Angular syntax error. The syntax error goes away when I change the vg-src back to 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>

That works. The problem is that vg-src="controller.config.sources" works but vg-src="{{video.videoURL}}" doesn't work. Why can't Videogular source videos from the $scope?

I tried to put my video sources from the $scope onto controller.config in the controller but this never worked. Should I try to do this again tomorrow? (It's late and I'm getting confused trying to figure out why I can't put my video sources from the $scope onto controller.config in the controller.)

Thomas David Kehoe · Answer 1 · 2017-03-10T19:21:34.563

I wrote the question before I went to bed and woke up with (what I hope is) the answer. {{video.videoURL}} inserts the URLs of the videos. controller.config.sources inserts an object with a lot of stuff. I'll try making an array of configured objects and see what happens!

...

Yep, that worked! I wrote a tutorial for a Videogular minimum install, using the $scope instead of controller.config. I don't understand why the official How To Start tutorial uses controller.config instead of the $scope.

...

I can get the one video to play from my array of cat videos when the user clicks "Cat Videos" but I can't get ng-repeat to spin out all the videos in the array.

In the controller when the user clicks the "Cat Videos" button the handler accesses the array of cat videos on Firebase Storage, iterates through the array with forEach, for each video in the array it creates a variable for the videoSource and another variable for the video file format (videoSourceType), then makes a videoObject with an array of sources and a theme, then pushes the videoObject into the array $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++;
        });
};

In the HTML view ng-repeat iterates through the array $scope.videoObjects and fdor each video object spins out a new Videogular video player using the theme and the sources. This doesn't work and the error message is Error: [$parse:syntax], in other words, an Angular syntax error.

<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>

I'll keep working on it!

Why does Videogular put the video source on controller.config instead of on the $scope?

1 Answers1