Use UI-Bootstrap Modal with Angular-Fullstack and ES6

Question

I would like to use the ui-bootsrap Modal with the AngularJS Fullstack Generator & ES6, but it doesn't work. I would like to choose a Project, click "Edit" and edit the Project in a large Modal. But I don't get the modal to open.

In the Console, I get this error Message:

"Error: $modal is not defined"

My Project Controller looks like this:

'use strict';

(function() {

  class ProjectCtrl {

    constructor(Project, $modal, $log) {
      this.project = Project;
      this.projects = [];
      this.getAllProjects(Project);
      this.$modal = $modal;
      this.log = $log;
    }

    // Open a modal window to Update a single Project
    modalUpdate(size, selectedProject) {
      var modalInstance = $modal.open({
        templateUrl: 'app/project/project-edit.modal.html',
        controller: function ($scope, modalInstance, aProject) {
          $scope.project = aProject;
        },
        size: size,
        resolve: {
          aProject: function () {
            return selectedProject;
          }
        }
      });

      modalInstance.result.then(function (selectedItem) {
        this.selected = selectedItem;
      }, function () {
        $log.info('Modal dismissed at: ' + new Date());
      });
    };
  }

angular.module('projectApp')
    .controller('ProjectCtrl', ProjectCtrl);
})();

app.js looks like this:

'use strict';

angular.module('projectApp', [
  'projectApp.constants',
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ui.router',
  'ui.bootstrap' 
])
  .config(function($urlRouterProvider, $locationProvider) {
    $urlRouterProvider
      .otherwise('/');

    $locationProvider.html5Mode(true);
  });

The Button to open the Modal:

<button type="button" class="btn btn-default btn-xs pull-right" ng-click="ProjectCtrl.modalUpdate('lg', project)"><span aria-hidden="false"></span> Edit</button>

My guess is that in ProjectCtrl, I have somehow to $inject 'Project', '$modal' & '$log', but I don't know how and where.

Answer 1

I solved the Modal problem in another way, cause it seems that UI Bootstrap doesn't work in ES6. At least not now.

I used the Modal Service here for Angular-Fullstack.

Here is a simple example with a delete Modal:

'use strict';

(function() {

class AdminController {
  constructor(User, Modal) {
    // Use the User $resource to fetch all users
    this.users = User.query();
    this.modal = Modal;
  }

  delete(user) {
    var deleteConfirmationModal = this.modal.confirm.delete((user) => {
        user.$remove();
        this.users.splice(this.users.indexOf(user), 1);
    });

    deleteConfirmationModal(user.name, user);
  }
}

angular.module('sampleApp.admin')
  .controller('AdminController', AdminController);

})();

This is how the Modal looks like: