A
A
Alexey Yarkov2016-04-07 23:50:47
Angular
Alexey Yarkov, 2016-04-07 23:50:47

How to open $uibModal.open?

I have a service:

/*global angular*/
(function () {

  angular
    .module('App')
    .service('modalService', ['$uibModal', modalService]);

  modalService.$inject = ['$uibModal'];

  function modalService($uibModal) {

      var modalDefaults = {
        backdrop: true,
        keyboard: true,
        modalFade: true,
        templateUrl: 'routes/modalServiceTemplate.html'
      };

      var modalOptions = {
        closeButtonText: 'Отмена',
        actionButtonText: 'OK',
        headerText: 'Подтверждение',
        bodyText: 'Вы уверены?'
      };

      this.showModal = function (customModalDefaults, customModalOptions) {
        if (!customModalDefaults){
          customModalDefaults = {};
        }
        customModalDefaults.backdrop = 'static';
        return this.show(customModalDefaults, customModalOptions);
      };

      this.show = function (customModalDefaults, customModalOptions) {
        var tempModalDefaults = {};
        var tempModalOptions = {};

        angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);

        angular.extend(tempModalOptions, modalOptions, customModalOptions);

        if (!tempModalDefaults.controller) {
          tempModalDefaults.controller = ['$scope', '$modalInstance', function ($scope, $modalInstance) {
            $scope.modalOptions = tempModalOptions;
            $scope.modalOptions.ok = function (result) {
              $modalInstance.close(result);
            };
            $scope.modalOptions.close = function (result) {
              $modalInstance.dismiss('cancel');
            };
          }]
          
          tempModalDefaults.controller.$inject = ['$scope', '$modalInstance'];
        }

        return $uibModal.open(tempModalDefaults).result;
      };

    }


})();

In the controller method I call it like this:
self.submitDelete = function () {
      var modalOptions = {
        closeButtonText: 'Отмена',
        actionButtonText: 'Удалить аккаунт',
        headerText: 'Подтверждение',
        bodyText: 'Вы уверены, что хотите удалить аккаунт?'
      };

      modalService.showModal({}, modalOptions).then(function (result) {
        console.info(result);
        //self.$auth.DeleteAccount();
      });
    };

The routes/modalServiceTemplate.html template is loaded and an error appears in the console:
Error: [$injector:unpr] http://errors.angularjs.org/1.5.3/$injector/unpr?p0=%24modalInstanceProvider%20%3C-%20%24modalInstance
    at Error (native)
    at https://passwordkeeper-yarkovaleksei.c9users.io/bower_components/angular/angular.min.js:6:416
    at https://passwordkeeper-yarkovaleksei.c9users.io/bower_components/angular/angular.min.js:43:7
    at Object.d [as get] (https://passwordkeeper-yarkovaleksei.c9users.io/bower_components/angular/angular.min.js:40:270)
    at https://passwordkeeper-yarkovaleksei.c9users.io/bower_components/angular/angular.min.js:43:69
    at d (https://passwordkeeper-yarkovaleksei.c9users.io/bower_components/angular/angular.min.js:40:270)
    at e (https://passwordkeeper-yarkovaleksei.c9users.io/bower_components/angular/angular.min.js:41:1)
    at Object.invoke (https://passwordkeeper-yarkovaleksei.c9users.io/bower_components/angular/angular.min.js:41:86)
    at S.instance (https://passwordkeeper-yarkovaleksei.c9users.io/bower_components/angular/angular.min.js:88:235)
    at https://passwordkeeper-yarkovaleksei.c9users.io/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js:8:25886

Service in controller dependencies is declared, scripts are connected. For example, pagination from ui.bootstrap works, but I can’t start the window ((
UPD # 1: Updated the service code. Now another error (((

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Alexey Yarkov, 2016-04-08
@yarkov

Understood. You need to replace $modalInstance with $uibModalInstance. Now another problem. How to return something from the window on button click?
UPD#1: To return a value from the window, you need to pass something to the method. In the template we write like this:

.modal-header
  h3
    | {{modalOptions.headerText}}
.modal-body
  p
    | {{modalOptions.bodyText}}
.modal-footer
  button.btn(type='button', data-ng-click='modalOptions.close()')
    | {{modalOptions.closeButtonText}}
  //-Вернет строку 'delete'
  button.btn.btn-primary(data-ng-click='modalOptions.ok("delete")')
    | {{modalOptions.actionButtonText}}

A
Alexander Kondaurov, 2016-04-08
@kondaurov

Remove 'use strict'; at the beginning of the script, or do you explicitly need it?
stackoverflow.com/questions/33383854/how-to-fix-an...

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question