Question

我有一个自定义指令，它与下拉列表非常相似。下拉菜单中的项目与某些视频的文件名相关联。下拉列表下方的div显示默认视频文件（我已通过Videoangular完成此操作）。

每当我从下拉菜单中进行选择时，我都会将包含filename（String）的默认变量更改为我想要的那个。但是，同样没有反映在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 的值。由于该代码只运行一次，它将永远保持为＆＃34; assets / data / WaterCool1.mp4＆＃34;。

至少需要做的是在下拉列表中选择一个选项时修改此值。类似的东西：

// ...
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，因为角度可能无法通过此onSelect事件处理了解您对该字段的更改。理想情况下，您可以使用ng-change直接在HTML中将事件绑定到函数，并避免使用它。

如果您提供完整的示例（https://plnkr.co/edit/），则可以更轻松地引导您找到解决方案，并在无需重写原始代码的情况下进行解释。

基于Angularjs中的下拉选择（自定义指令）刷新div的内容

1 个答案: