基于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/ ），则无需重新编写原始代码即可更轻松地指导您找到解决方案并进行解释。