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

Question

我有一個自定義指令，與下拉菜單非常相似。 下拉菜單中的項目與某些視頻的文件名相關聯。 下拉菜單下面的div顯示默認視頻文件（我已經通過Videoangular完成了此操作 ）。

每當我從下拉菜單中進行選擇時，我都會將包含文件名（字符串）的默認變量更改為所需的文件名。 但是，在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> 

Answer 1

您不需要刷新div。 您需要使用角度來基於修改綁定屬性來刷新div。

您對this.config的聲明實際上是靜態的，並且在實例化之后您絕不會修改this.config.sources src的值。 由於該代碼僅運行一次，因此將永遠保留為“ 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"}];
   }

// ...

即使那樣，使用此代碼，您可能仍需要觸發手動$ apply，因為angular可能不知道通過此onSelect事件處理對字段的更改。 理想情況下，您可以使用ng-change將事件直接綁定到HTML中的函數，而無需這樣做。

如果您提供完整的示例（ https://plnkr.co/edit/ ），則無需重新編寫原始代碼即可更輕松地指導您找到解決方案並進行解釋。