ドロップダウンの選択（カスタムディレクティブ）に基づくdivの内容をリフレッシュする

Question

私はドロップダウンに非常に似たカスタムディレクティブを持っています。ドロップダウンメニューの項目は、特定の動画のファイル名に関連付けられています。ドロップダウンの下のdivは、デフォルトのビデオファイルを表示します（これはVideoangularで行いました）。

ドロップダウンメニューから選択するたびに、filename（String）を含むデフォルトの変数を必要なものに変更します。しかし、それは部門に反映されていません。

私の目的は、ドロップダウンメニューから選択するたびに適切なビデオを含むdivをリフレッシュすることです。

これは私のコントローラである：

angular.module('myApp', 
    [ 
     "ngSanitize", 
     "com.2fdevs.videogular", 
     "com.2fdevs.videogular.plugins.controls", 
     "com.2fdevs.videogular.plugins.overlayplay" 
    ] 
) 
    .controller('ctrl', 
     ["$rootScope", "$scope", "$state", "$log", "Restangular", 
      function ($rootScope, $scope, $state, $log, Restangular) { 

       'use strict'; 

       var vm = this; 

       //DEFAULT VIDEO FILE NAME 
       vm.fields = "WaterCool1"; 

       this.config = { 
        sources: [ 
         {src: "assets/data/"+vm.fields+".mp4", type: "video/mp4"} 
        ] 
       }; 

       vm.loadPage = loadPage; 

       vm.coolingSystemTypeSelector = {coolingSystemTypeSelector:{}}; 


    getAll('cooling-system-type').then(
         function(objs) { 
          $log.debug("get Cooling System Type", objs); 
          vm.coolingSystemTypeSelector = objs.selector; 
          vm.fields = "WaterCool1"; 

          vm.coolingSystemTypeSelector.onSelect = function (selection) { 
           if(!selection){ 
            return; 
           } 

           $log.debug("Cooling System Type Selection == ", selection); 
           if(selection.label==="ACC"){ 
            vm.fields = "AirCool"; 
           }else if(selection.label === "WCC-CT"){ 
            vm.fields = "WaterCool1"; 
           }else if(selection.label === "WCC-DC"){ 
            vm.fields = "WaterCool2"; 
           } 

          }; 
         } 
        ); 
       ///..... 
      } 
     ] 
    ); 

は、これが私のHTMLです：あなたが必要なもの

<div> 
    <selector form="form" columns=vm.columns target="vm.coolingSystemTypeSelector"></selector> 

</div> 
<hr> 
<div id="refreshThisDiv"> 
    <!--I want to refresh this div--> 
    <videogular vg-theme="vm.config.theme"> 
    <!--VIDEOGULAR CODE--> 
    </videogular> 
</div> 

Answer 1

はdiv要素をリフレッシュすることではありません。バインドされたプロパティを変更することに基づいてdivをリフレッシュするには、角度が必要です。

this.configのあなたの宣言は実際には静的であり、あなたがインスタンス化した後 SRC this.config.sourcesの値を変更することはありません。そのコードは一度しか実行されていないので、永遠に "assets/data/WaterCool1.mp4"のままになります。

少なくとも、代わりに行う必要があるのは、ドロップダウンでオプションを選択したときにこの値を変更することです。ような何か：

// ... 
var that = this; 
getAll('cooling-system-type').then(

    // ... inside onSelect ... 
    if(selection.label==="ACC") { 
     that.config.sources = [{src: "assets/data/AirCool.mp4", type: "video/mp4"}]; 
    } 

// ... 

はその後も、このコードでは、$これにonSelectイベント処理を経由してフィールドへのご変更を認識しないかもしれないような角度に適用マニュアルをトリガーする必要がある場合があります。理想的には、ng-changeを使用することで、イベントをHTMLの関数に直接バインドし、その必要性を避けることができます。

完全なサンプル（https://plnkr.co/edit/）を提供している場合は、元のコードを書き直す必要なしに、ソリューションへの案内と説明が簡単になります。