Используйте UI-Bootstrap Modal с Angular-Fullstack и ES6

Я хотел бы использовать модальный интерфейс ui-bootsrap с Генератор полного стека AngularJS и ES6, но это не работает. Я хотел бы выбрать проект, нажать «Изменить» и отредактировать проект в большом модальном окне. Но у меня не открывается модальное окно.

В консоли я получаю это сообщение об ошибке:

"Error: $modal is not defined"

Мой контроллер проекта выглядит следующим образом:

'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’, но я не знаю, как и где.


javascript angularjs ecmascript-6 angular-ui-bootstrap angular-fullstack
person crazy-ace    schedule 18.05.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я решил модальную проблему другим способом, потому что кажется, что UI Bootstrap не работает в ES6. По крайней мере, не сейчас.

Я использовал модальную службу здесь для 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);

})();

Вот так выглядит модал:

введите здесь описание изображения

person crazy-ace    schedule 25.05.2016

arrow_upward
0
arrow_downward

Какую версию ui-bootstrap вы используете?

Синтаксис отличается в зависимости от используемой версии.

Предполагая, что вы используете v0.13.4 или старше и без ES6, вот решение:

ПРИМЕЧАНИЕ. Если вы используете более позднюю версию, чем v0.13.4, замените $modal на $uibModal и $modalInstance на $uibModalInstance, и это тоже должно работать.

Во-первых, что вам нужно сделать, это написать в командной строке:

yo angular-fullstack:controller MyModalName

затем в myModalName.controller.js поместите это:

.controller('MyModalNameCtrl', function ($scope,$modal) {

$scope.openModal = function () {
  var modalInstance = $modal.open({
    animation: true,
    templateUrl: 'testmodal',
    controller: 'ModalInstanceCtrl',

  });

  modalInstance.result.then(function () {}, function () {
    console.log('Modal dismissed at: ' + new Date());
  });
};

});

Затем еще в myModalName.controller.js поместите ниже:

//change theNameOfYourApp to your corresponding app name !
angular.module('theNameOfYourApp').controller('ModalInstanceCtrl', function ($scope, $modalInstance) {

  $scope.ok = function () {
    $modalInstance.close(); 
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

Затем, последний шаг, на странице .html, где вы хотите отобразить модальное окно, поместите:

<!--Modal Template-->
<div ng-controller="MyModalNameCtrl">
  <script type="text/ng-template" id="testmodal">
    <div class="modal-header">
      <h3 class="modal-title">Hello :</h3>
    </div>
    <div class="modal-body">
      <p>hey, this is the body </p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-default" type="button" ng-click="ok()">OK</button>

      <button class="btn btn-default" type="button" ng-click="cancel()">Cancel()</button>
    </div>
  </script>
</div>
person Emidomenge    schedule 20.05.2016
comment
Вчера я обновил свой ui-bootstrap до последней версии. Нет ли другого способа решить проблему в моем уже существующем ProjectCtrl? Я использую этот контроллер для операций CRUD, и я хотел использовать Modal для обновления значений проекта. Но я написал ProjectCtrl в ES6 и не знаю, как реализовать модальность в ES6. - person crazy-ace; 22.05.2016
comment
У меня нет хороших знаний о ES6, поэтому я не могу вам помочь в этом случае :/ Может быть, вернитесь к моему приведенному выше примеру и переведите то, что я написал, в ES6. Думаю, это не должно быть слишком сложно. - person Emidomenge; 24.05.2016