javascript - 将 UI-Bootstrap Modal 与 Angular-Fullstack 和 ES6 结合使用

Question

我想使用 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 'Project'、'$modal' 和 '$log'，但我不知道如何以及在何处。

Answer 1

我用另一种方式解决了 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);

})();

这是模态框的样子: