How to use angular-filemanager addon in Ember

Question

I installed angular-filemanager with bower install angular-filemanager --save and imported the necessary dependencies in ember-cli-build.js.

  app.import('bower_components/angular/angular.js');
  app.import('bower_components/angular-translate/angular-translate.min.js');
  app.import('bower_components/jquery/dist/jquery.min.js');
  app.import('bower_components/ng-file-upload/ng-file-upload.min.js');
  app.import('bower_components/bootstrap/dist/js/bootstrap.min.js');
  app.import('bower_components/angular-filemanager/dist/angular-filemanager.min.css');
  app.import('bower_components/angular-filemanager/dist/angular-filemanager.min.js');

Then I created a component, but I am not sure how to use the angular-filemanager directive.

component.js:

didInsertElement: function() {
    let model = this.get('model');
    angular.module('angular-filemanager', []).directive('somedirective', function() {
        return { template: 'test {{ model[0] }} test' };
    }).run(function($rootScope){ $rootScope.model = model; });
    angular.bootstrap(this.element, ['angular-filemanager']);
}

template.hbs:

<div somedirective="model"></div>

I don't know much about angular and I just started learning ember a few months ago. All I have been able to do for this is run that function directive.

---Edit---

Since I am using mirage, I just made methods with path admin/file that returns nothing meaningful for both get and post requests.

And I changed the component.js's didInsertElement to

 didInsertElement: function() {
    angular.module('FileManagerApp').config(['fileManagerConfigProvider', function (config) {
      config.set({
        appName: 'angular-filemanager',

        listUrl: 'api/admin/file',
        uploadUrl: 'api/admin/file',
        renameUrl: 'api/admin/file',
        copyUrl: 'api/admin/file',
        moveUrl: 'api/admin/file',
        removeUrl: 'api/admin/file',
        editUrl: 'api/admin/file',
        getContentUrl: 'api/admin/file',
        createFolderUrl: 'api/admin/file',
        downloadFileUrl: 'api/admin/file',
        downloadMultipleUrl: 'api/admin/file',
        compressUrl: 'api/admin/file',
        extractUrl: 'api/admin/file',
        permissionsUrl: 'api/admin/file',
      });
    }]);

    angular.bootstrap(this.element, ['FileManagerApp']);
});

and the template.hbs to

<angular-filemanager></angular-filemanager>

I still do not see anything displaying on the screen, but there is an error on the console:

vendor.js: 144343 TypeError: e.post(...).success is not a function
    at o.list (vendor.js:163007)
    at i.list (vendor.js:163007)
    at i.list (vendor.js:163007)
    at i.refresh (vendor.js:163007)
    at new <anonymous> (vendor.js:163007)
    at Object.invoke (vendor.js:134857)
    at $controllerInit (vendor.js:140710)
    at nodeLinkFn (vendor.js:139587)
    at compositeLinkFn (vendor.js:138896)
    at nodeLinkFn (vendor.js:139650)

How to use angular-filemanager addon in Ember

---Edit---

0 Answers0