nwdirectory pass as model to angular

Question

I am using nodeWebKit to create an app that uses folders.

I need to get the path of the folder, but the user should select which paths.

The nw API tells to use: nwdirectory

Doing something like below will not work

<input type="file" ng-model="dirPath" nwdirectory />

Well:

<form ng-submit="addDir()">
  <input type="file" ng-model="dirPath" nwdirectory />
  <input class="btn-primary" type="submit" value="add">
</form>

I wanted to pass it to:

$scope.dir = []
$scope.addDir = function() {
  $scope.dir.push({ path: $scope.dirPath });
}

Of course it always shows nothing. How to do this properly?

Where does $scope.dirPath come from? The ng-model is set to $scope.path. — zszep, Jun 20 '14 at 04:37
did you find a solution for this? I still have this problem and really need to solve it... :/ — novas1r1, Jan 08 '15 at 14:33

score 0 · Answer 1 · edited May 23 '17 at 12:29

finally I solved this issue... The problem: there's no binding support for file upload control (read here). So I fixed it like they did:

<input type="file" id="fileDialog" onchange="angular.element(this).scope().setDirectoryPath(this)" nwdirectory />

And added a function in my controller:

$scope.setDirectoryPath = function(value) {
   console.log('path:', value.files[0].path);
};

Maybe there are other (more beautiful) ways to solve it like using your own directive, but this was the fastest working way for me =)!

Regards

score 0 · Answer 2 · answered Sep 10 '15 at 07:46

I created directive for this:

.directive('nwdirectory', ['$timeout', function ($timeout) {
  return {
    restrict: "A",
    scope: {
      directoryPath: "=nwdirectory"
    },
    link: function (scope, element) {

      element.val(scope.directoryPath);
      element.data('old-value', scope.directoryPath);

      scope.$watch('directoryPath', function (val) {
        element.val(scope.directoryPath);
      });

      element.bind('change', function (blurEvent) {
        if (element.data('old-value') != element.val()) {
          $timeout(function () {
            scope.directoryPath = element.val();
            element.data('old-value', element.val());
          });
        }
      });
    }
  };
}])

use it like this:

//controller.js
$scope.directoryPath = "C:\\Users\\Username" //optional

//HTML
<input type="file" nwdirectory="directoryPath">

nwdirectory pass as model to angular

2 Answers2