【问题标题】:Using $uibModal from a factory使用工厂的 $uibModal
【发布时间】:2017-02-18 23:47:42
【问题描述】:

我一直在尝试使用工厂的 uibModal,而不是在我的控制器中使用它。对话框出现,单击确定时将字段数据返回到服务,但是,我不知道如何将数据返回到我的控制器,它将被添加到我的模型中是否有任何指针?

这是我的工厂代码:

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

【问题讨论】:

  • 希望您可以使用 DialogService.newObj 变量从控制器访问数据。

标签: javascript angularjs angular-ui-bootstrap bootstrap-modal angular-services


【解决方案1】:

您可以使用$uibModalInstance 服务上提供的close 方法,在该方法中您可以在关闭弹出窗口时传递数据。然后您可以使用result promise 对象,该对象在模态关闭时会被调用。从$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'});
};

【讨论】:

  • 应该从服务方法返回$uibModal.open()实例
  • 对于更通用的用途也可以返回modalInstance.result。然后控制器只管理承诺
  • @charlietfl 但是如果用户想将处理程序放在.opened 和其他选项上,它们将被隐藏
  • 可以将回调作为参数传递。我有一些模态工厂也有子方法,然后调用包装$uibModal.open 的函数并根据情况进行不同的配置
  • 我经常做openModal( type, data, opts)之类的事情,然后在工厂中使用它来自定义哪个模态控制器和其他配置等
猜你喜欢
  • 2017-04-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-12-12
  • 1970-01-01
  • 2016-03-01
  • 1970-01-01
相关资源
最近更新 更多