AngularJS如何使用promise和defer

时间:2015-02-16 00:35:51

标签: angularjs angularjs-service angular-promise

我有这项服务:

angular.module('taskModule').service('myService', ['$modal', '$q', myService]);

function myService($modal, $q) {
  this.displayModal = function(data) {
    return $q(function(resolve, reject) {
      $modal.open({
        templateUrl: 'taskModule/taskModule/modal.tpl.html',
        controller: function() {
          this.datas = data;
          this.buttonAction = function(id) {
            console.log(id);
          };
        },
        controllerAs: 'myCtrl'
      });
    });
  };
}

我应该在此代码中添加什么才能在控制台中看到

You clicked the button ok

OR

You clicked the button Cancel 

当我用这段代码调用这个模态时:

myService.displayModal({
  title: "This is a modal window",
  message: "Please click a button.",
  buttons: [{
    id: 'ok',
    label: 'OK'
  }, {
    id: 'cancel',
    label: 'Cancel'
  }, ]
}).then(function(buttonId) {
  console.log('You clicked the button', buttonId);
});

也许我应该使用$q.defer();,但我是AngularJS的新手。

1 个答案:

答案 0 :(得分:2)

$ modal.open函数返回一个模态实例,该模型实例已经具有在模态关闭/解除时解析/拒绝的承诺,因此您可以返回该承诺而不是创建新的承诺。

要返回带有承诺的值,您可以使用该值调用close / dismiss - 在下面更新。

function myService($modal, $q) {
  this.displayModal = function(data) {
    var modalInstance = $modal.open({
      templateUrl: 'taskModule/taskModule/modal.tpl.html',
      controller: function() {
        this.datas = data;
        this.buttonAction = function(id) {
          console.log(id);
          modalInstance.close(id);
        };
      },
      controllerAs: 'myCtrl'
    });
    return modalInstance.result;
  };
}