UI-Router $stateChangeStart 承诺函数

Question

您可能已经知道，我将 UI-Router 与我的 AngularJS 应用程序一起使用。我有一个接受用户输入的页面，我们称之为个人资料页面。在此页面中，我有一个保存按钮，用户可以在其中保存他们输入的信息。那部分效果很好，没有问题。

我想要做的是保存有关状态更改的页面/信息。我想做的是，在我的控制器中是这样的：

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {

        saveFile();

    });


// Save Document
    function saveFile() {
        $(".page-loading").removeClass("hidden");

        html2canvas($('#main_page'), {
            // When image is rendered proceed with saving the file
            onrendered: function (canvas) {
                //$rootScope.contentJson.image = canvas.toDataURL();


                var html = $('#main_page')[0].innerHTML;
                for (var x in tmpList) {
                    if (tmpList[x].saveText === 'true') {

                        tmpList[x].element = tmpList[x].savedElement;
                    }
                    if (tmpList[x].saveText === 'tabs') {
                        for (var y in tmpList[x].tabType) {
                            tmpList[x].tabType[y].tabText = tmpList[x].tabType[y].savedElement;
                            tmpList[x].tabType[y].header = tmpList[x].tabType[y].savedHeader;
                        }
                    }
                    if (tmpList[x].saveText === 'table') {
                        for (var y in tmpList[x].layout) {
                            for (var z in tmpList[x].layout[y].row) {
                                tmpList[x].layout[y].row[z].text = tmpList[x].layout[y].row[z].savedText;
                            }
                        }
                    }
                    if (tmpList[x].saveText === 'accordion') {

                        for (var y in tmpList[x].accordion) {
                            tmpList[x].accordion[y].title = tmpList[x].accordion[y].savedTitle;
                            tmpList[x].accordion[y].content = tmpList[x].accordion[y].savedContent;
                        }
                    }
                }

                var data = {
                    'html': html,
                    'image': canvas.toDataURL(),
                    'json': JSON.stringify({"content": tmpList, "gallery": $scope.img, "audio": $scope.audio})
                };
                editorData.saveContent(data).then(function (response) {
                    $scope.pushAlerts('Saved');
                    $rootScope.lastSegment = '';
                    $(".page-loading").addClass("hidden");


                    // If its a new content
                    if ($rootScope.newElement == 'new-content') {

                        // Set Content ID
                        $rootScope.contentID = response.data.id;

                        // Set cookie for contentID
                        $cookies.put('contentID', $rootScope.contentID);

                        // Set new element to empty
                        $rootScope.newElement = '';
                        $cookies.remove('newElement');

                        // Redirect and populate contentID
                        $state.go('editor', {
                            topicID: $stateParams.topicID,
                            contentID: response.data.id
                        });
                        $state.reload();
                    }

                    var currentTime = new Date();

                    $scope.timeSaved = currentTime.getMinutes();

                });
            }
        });
    }

在我看来这是有道理的（也许在你的心中没有:)）。但问题是 saveFile() 函数没有完成并且状态发生了变化。有没有人遇到过一种方法，例如等到这个函数完成，然后才继续进行状态更改？也许创造一个承诺？

谢谢

Answer 1

您可以使用event.preventDefault() 阻止状态更改发生，保存文件，然后继续进行状态更改。

您还可以修改您的saveFile() 以返回一个承诺。 （查看documentation for $q）

（我没有对此进行测试。可能还有一种更简洁的方法可以只防止第一个 stateChange 发生变化。）

var savedFlag = false;

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
  if (!savedFlag) {
    event.preventDefault();

    saveFile().then(function (response) {
      savedFlag = true;
      $state.go(toState, toParams);
    }, function (error) {
      // handle error
    });
  }
});

function saveFile() {
  var deferred = $q.defer();

  html2canvas(..., {
     onrendered: function (canvas) {
        ...
        return deferred.resolve('success!');
     }
  });

  return deferred.promise;
}