代码之家 › 专栏 › 技术社区 › Robin Thoni

如何使用ui router 1.0防止AngularJS 1.6中的状态更改?

angularjs-1.6 transitions angular-ui-router angularjs javascript

0

Robin Thoni · 技术社区 · 7 年前

我们如何使用 $transitions 是否取消状态更改以提示用户保存?以前的ui路由器版本曾经具有 event 在回调中,可以使用 event.preventDefault() ,但这一事件似乎已经消失。

我正在控制器中使用以下代码:

var onTransitionStartOff = $transitions.onStart({}, function($transitions)
{
    if ($scope.itemTracker.hasChanged()) {
        $scope.itemTracker.askExitConfirm().then(function () {
            onTransitionStartOff();
            var toState = $transitions.$to();
            $state.go(toState);
        }, function () {});
        return $q.reject(null);
    }
    onTransitionStartOff();
});

它工作得很好,但由于拒绝的承诺,它在控制台中留下了一条错误消息。

我看了一下stateService。ts,但我没有看到一些有趣的东西。。。

2 回复 | 直到 7 年前

1

2

Abhijeet Ahuja 7 年前

解决方案是,如果您想保持当前状态,则使用false来解析承诺;如果您想导航到新状态,则用true来解析承诺。

return $q.resolve(false);

2

1

Chris T 7 年前

app.component('myComponent', {
  template: '<input ng-model="$ctrl.data" type="text">',
  bindings: { 'data': '<' },
  controller: function() {

    this.originalData = angular.copy(this.data);

    this.uiCanExit = function() {
      if (!angular.equals(this.data, this.originalData) {
        // Note: This could also return a Promise and request async
        // confirmation using something like ui-bootstrap $modal
        return window.confirm("Data has changed.  Exit anyway and lose changes?");
      }
    }
  }

这也可以处理异步代码(返回承诺)。

推荐文章

Nauman Tanwir · AngularJS 1.6.8:无法将数据从控制器传递到视图

6 年前

Ananda G · 为什么Angular UI Grid不能使用Angular更新版1.6.5?

7 年前

karthi · 自定义过滤器,将AngularJS 1.x中一个选择框中的选定选项从另一个选择框中删除

7 年前

student1868 · 无法注入依赖项ngMaterial

7 年前

luca · AngularJS代码元素在获得API响应之前显示在HTML UI中

7 年前

Robin Thoni · 如何使用ui router 1.0防止AngularJS 1.6中的状态更改?

7 年前