Electron/AngularJS - 从 showOpenDialog 动态加载视频文件答案

【问题标题】：Electron/AngularJS - Dynamically load video file from showOpenDialogElectron/AngularJS - 从 showOpenDialog 动态加载视频文件
【发布时间】：2016-11-22 00:58:46
【问题描述】：

我是个菜鸟，仍然对某些事情感到困惑。

我正在将 Angular 1.5.8 与 Electron 一起使用，并且我正在尝试在 main.js 中选择一个 dialog.showOpenDialog 文件时启动一个视频加载器。

main.js

click(item, focusedWindow) {
  dialog.showOpenDialog(
    win, {
      filters: [{
        name: 'Video files',
        extensions: ['mkv', 'avi', 'mp4']
      }],
      properties: ['openFile']
    }, (fileNames) => {
      if (fileNames === undefined) return;
      var videoFilePath = fileNames[0];
      win.webContents.send('videoFilePath', videoFilePath);
    }
  );
}

videoCtrl.js

const electron = require('electron')
const ipcRenderer = electron.ipcRenderer
var app = angular.module('videoModule', []);

app.controller('videoCtrl', function($scope) {

  $scope.isVideoOpened = false;

  ipcRenderer.on('videoFilePath', function(event, arg) {
    $scope.videoPathFile = arg;
    $scope.isVideoOpened = true;
  });

});

html

<div ng-controller="videoCtrl" ng-show="isVideoOpened">
  Here {{isVideoOpened}} Here2{{videoPathFile}}
  <video id="v1" controls tabindex="0" autobuffer>
    <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="{{videoPathFile}}" />
  </video>
</div>

当我打开视频时，isVideoOpened 设置为 true，并且 videoPathFile 是正确的（如果我以相同的方式单独打开此文件路径，它可以工作）。

但是，当我按下开始时，文件并没有开始缓冲。我做错了什么？

【问题讨论】：

标签： javascript html angularjs electron

【解决方案1】：

我通过使用ng-if 而不是ng-show 解决了这个问题。

但是有一些细节，比如here。

基本上ng-if会生成一个子作用域，所以我需要把它放在一个内部标签中，我还需要使用ng-src。

<div ng-controller="videoCtrl" >
    <div ng-if="isVideoOpened">
        <video id="v1" controls class="videoInsert">
            <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" ng-src="{{videoPathFile}}" />
        </video>
    </div>
</div>

【讨论】：