Electron/AngularJS - Dynamically load video file from showOpenDialog

Question

I'm using Angular 1.5.8 with Electron and I'm trying to start a video loader when a dialog.showOpenDialog file is selected in main.js.

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>

When I open the video, the isVideoOpened is set to true and the videoPathFile is correct (if I open this filepath the same way in a separate window, it works).

However the file does not start buffering when I press start. What am I doing wrong?

Answer 1

I solved it by using ng-if instead of ng-show.

But with some details like it says here.

Basically ng-if generates a sub-scope so I need to put it in an inner tag and I also need to use 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>