Videogularが$ scopeではなくcontroller.configにビデオソースを置くのはなぜですか？

Question

私は、Firebase Storageからビデオを再生するための基本的なVideogularビデオプレーヤーのセットアップを持っています。 HTMLビューでは、これは動作します：コントローラで

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

をこの作品：

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

すべてが一つのビデオを再生するには、動作します。今、テーマ別に動画の配列に動的にアクセスしたいと思っています。たとえば、ユーザーがクリックしてすべての猫の動画を見るか、別のボタンをクリックしてすべての犬の動画を見ます。あまりにも素晴らしい作品

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

：私は、ビュー内のURLアウト$scopeとng-repeatプリント上FirebaseストレージのURLを持っています。だから私はちょうどvg-srcが$scopeから来ると、各ビデオのための新しいビデオプレーヤーでng-repeatを行う必要があり、すべての私の猫のビデオとビデオプレーヤーのシリーズをスピンアウトします

動作しません

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

。エラーはError: [$parse:syntax]です。つまり、角度構文エラーがあります。私は戻ってvg-src="controller.config.sources"からvg-srcを変更すると、構文エラーが消える：

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

に動作すること。問題は、vg-src="controller.config.sources"が機能しますが、vg-src="{{video.videoURL}}"は機能しません。 $scopeのビデオをVideogularソースにできないのはなぜですか？

$scopeのビデオソースをコントローラのcontroller.configに配置しようとしましたが、これは決して機能しませんでした。私は明日これをやろうとするべきでしょうか？ （遅いですが、ビデオソースを$scopeからコントローラのcontroller.configに入れることができない理由を理解しようと混乱しています）

Answer 1

私は就寝前に質問を書いて、私が望むのは答えです）。 {{video.videoURL}}は動画のURLを挿入します。 controller.config.sourcesは、多くのものを持つオブジェクトを挿入します。設定されたオブジェクトの配列を作り、何が起こるかを見てみましょう！

...

うん、それはうまくいった！私は、controller.configの代わりに$scopeを使ってtutorial for a Videogular minimum installと書いた。公式How To Start tutorialが$scopeの代わりにcontroller.configを使用する理由を理解できません。

...

は、私は、ユーザーがクリックした「猫動画」猫の動画の私の配列から再生するように一つのビデオを得ることができますが、私は、アレイ内のすべての動画をスピンアウトしng-repeatを取得することはできません。

コントローラーで、「Cat Videos」ボタンをクリックすると、ハンドラーはFirebase Storageのcatビデオの配列にアクセスし、配列内の各ビデオについてforEachで配列を繰り返します。これはvideoSourceの変数を作成し、ビデオファイルフォーマット（videoSourceType）用の別の変数を作成し、ソースとテーマの配列を持つvideoObjectを作成してから、$ scope.videoObjectsという配列にvideoObjectをプッシュします。

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

配列$ scope.videoObjectsを通じてHTMLビューNG-繰り返し反復して

、各ビデオオブジェクトは、テーマとソースを使用して、新しいVideogularビデオプレーヤーをスピンfdor。これは動作せず、エラーメッセージはError：[$ parse：syntax]、つまり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> 

私はそれに取り組んでいきます！