在Angularjs中基於下拉選擇（自定義指令）刷新div的內容

我有一個非常類似於下拉菜單的自定義指令。下拉菜單中的項目與某些視頻的文件名相關聯。下拉下方的div顯示默認視頻文件（我通過Videoangular完成了此操作）。在Angularjs中基於下拉選擇（自定義指令）刷新div的內容

每當我從下拉菜單中進行選擇，我將包含文件名（字符串）的默認變量更改爲我想要的。但是，這同樣沒有體現在div中。

我的目標是每當從下拉菜單中進行選擇時，用合適的視頻刷新包含視頻的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>

來源

2016-10-03 Chetan

沒有指令代碼很難提供幫助。演示會有幫助，並刪除任何與問題無關的代碼 – charlietfl

你需要的是不刷新DIV。你需要角來刷新div的基礎上你修改綁定屬性。

你this.config的聲明實際上是靜態的，你永遠不會改變的this.config.sources SRC實例化後的值。由於該代碼只運行一次，它將永遠保持爲「資產/數據/ 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/），則可以更容易地引導您找到解決方案並進行解釋，而無需重寫您的原始代碼。

來源

2016-10-03 23:34:46

你是男人！ @Fredy。非常感謝！ – Chetan

在Angularjs中基於下拉選擇（自定義指令）刷新div的內容

回答

相關問題