Question

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

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

$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;
}

UI-Router $ stateChangeStart promise函数

1 个答案: