javascript - 将UI-Bootstrap模态与Angular-Fullstack和ES6一起使用

我想将ui-bootsrap Modal与AngularJS Fullstack Generator和ES6一起使用，但是它不起作用。
我想选择一个项目，单击“编辑”，然后以较大的模态编辑该项目。但是我没有打开模式。

在控制台中，我收到此错误消息:

"Error: $modal is not defined"

我的项目 Controller 如下所示:

'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看起来像这样:

'use strict';

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

    $locationProvider.html5Mode(true);
  });

打开模式的按钮:

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

我的猜测是，在ProjectCtrl中，我可以通过某种方式$ inject注入(inject)“Project”，“$ modal”和“$ log”，但是我不知道如何以及在何处。

最佳答案

我用另一种方式解决了Modal问题，原因是UI Bootstrap似乎在ES6中不起作用。至少不是现在。

我将模式服务here用于Angular-Fullstack。

这是一个删除模态的简单示例:

'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);

})();

这是Modal的样子:

关于javascript - 将UI-Bootstrap模态与Angular-Fullstack和ES6一起使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37309928/