Использование $uibModal с фабрики

#javascript #angularjs #angular-ui-bootstrap #bootstrap-modal #angular-services

#javascript #angularjs #angular-ui-bootstrap #bootstrap-модальный #angular-сервисы

Вопрос:

Я играл с использованием uibModal с фабрики вместо того, чтобы использовать его из моего контроллера. Появляется диалоговое окно, и данные поля возвращаются в службу при нажатии кнопки OK, но я не знаю, как вернуть данные обратно на мой контроллер, где они будут добавлены к моей модели Какие-либо указатели?

Вот мой заводской код:

     'use strict';

angular.module('ngTableScopeApp')
.factory('DialogService', function($uibModal){

  var DialogService = {};
  DialogService.newObj = {};

  DialogService.addNewItem = function(template, $q){

    this.modalInstance = $uibModal.open({
      templateUrl: template,
      controller: function($scope, $uibModalInstance){
        $scope.ok = function () {
          $uibModalInstance.close($scope);
          return this.newObj;
        };

        $scope.cancel = function () {
          $uibModalInstance.dismiss('cancel');
          return null;
        };
      }
    });
  };
  return DialogService;
});
  

Вот код контроллера:

     'use strict';

/**
 * @ngdoc function
 * @name ngTableScopeApp.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the ngTableScopeApp
 */
angular.module('ngTableScopeApp')
  .controller('MainCtrl', function (NgTableParams, DummyData, DialogService) {

    var self = this;
    self.data = DummyData.generateData(1);

    var createUsingFullOptions = function() {

      var initialParams = {
        count: 10 // initial page size
      };
      var initialSettings = {
        // page size buttons (right set of buttons in demo)
        counts: [5, 10, 25, 50],
        // determines the pager buttons (left set of buttons in demo)
        paginationMaxBlocks: 13,
        paginationMinBlocks: 2,
        dataset: self.data //DummyData.generateData(1)
      };
      return new NgTableParams(initialParams, initialSettings);
    };

    self.customConfigParams = createUsingFullOptions();

    self.addNewItem = function(){

        DialogService.addNewItem('views/addNewItem.html', self);
    };
  });
  

Комментарии:

1. Надеюсь, вы сможете получить доступ к данным с контроллера, используя переменную DialogService.newObj.

Ответ №1:

Вы можете использовать close метод, доступный в $uibModalInstance сервисе, в котором вы можете передавать данные при закрытии всплывающего окна. И затем вы можете использовать result объект promise, который вызывается при закрытии modal. Любые данные, переданные из $uibModalInstance.close метода, доступны там. Убедитесь, что вы возвращаете обещание, возвращенное $uibModal.open методом.

Фабрика

 DialogService.addNewItem = function(template, $q){

    this.modalInstance = $uibModal.open({
          templateUrl: template,
          controller: function($scope, $uibModalInstance){
            $scope.ok = function () {
               $uibModalInstance.close({ data: 'OK Called' });
            };

            $scope.cancel = function () {
               $uibModalInstance.close({ data: 'Cancel Called' });
            };
          }
        });
    };
    return this.modalInstance;
};
  

Контроллер

 DialogService.addNewItem('views/addNewItem.html', self)
.result.then(function(data) {
   console.log("data", data); // print { data: 'MyCustomData' }
});
  

Модальный контроллер

 $scope.cancel = function () {
    $uibModalInstance.close({data: 'MyCustomData'});
};
  

Комментарии:

1. должен возвращать $uibModal.open() экземпляр из метода service

2. также для более общего использования может вернуться modalInstance.result . Затем контроллер просто управляет обещанием

3. @charlietfl но что тогда, если пользователь захочет поместить обработчик поверх .opened других параметров, они будут скрыты

4. Может передавать обратные вызовы в качестве аргументов. У меня есть несколько модальных фабрик, у которых также есть вспомогательные методы, которые затем вызывают функцию, которая переносит $uibModal.open и настраивает ее по-разному в зависимости от регистра

5. я часто делаю такие вещи, как openModal( type, data, opts) затем использую это на заводе, чтобы настроить, какой модальный контроллер и другую конфигурацию и т. Д