javascript - 带有 ui.router $state 的 AngularJS 在异步时不起作用

Question

我在使用 AngularJS 时遇到问题和 ui.router .

我有一个应用程序，基本上是用户写入信息，这些信息被发送到服务器，当服务器响应时，我将当前状态更改为 channel 列表。

我的问题是，通过使用异步系统，我失去了更改当前状态的能力，没有任何错误，演示:

下面的演示是可以的，因为它没有使用异步系统(见控制台):

代码: http://jsfiddle.net/dievardump/x2tMT/

演示完整: http://jsfiddle.net/dievardump/x2tMT/embedded/result/

这个是不正常的(见控制台)。

代码: http://jsfiddle.net/dievardump/f9rSQ/

演示完整: http://jsfiddle.net/dievardump/f9rSQ/embedded/result/

这两个示例之间的唯一区别在于状态“platform.channels”的声明:

console.log('goes to platform.game');
$state.go('platform.game', {
    type: 'gameType',
    id: 1
});

对比

setTimeout(function () {
    console.log('should go to platform.game');
    $state.go('platform.game', {
        type: 'gameType',
        id: 1
    });
}, 1000);

易于在本地导入的完整演示:

工作:

<div ui-view></div>
<script>


var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise("/signin");

        $stateProvider
            .state('platform', {
                url: '/platform',
                data: {
                    permissions: ['auth']
                },
                template: "<section class='platform'>platform<div ui-view></div></section>",
                controller: function($state) {
                    console.log('platformController');
                }
            });
});

myApp.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('signin', {
            url: "/signin",
            template: "<section id='connect' class='connect'><form name='connection' action='' ng-submit='login(connection)'><input placeholder='Choose a nickname' ng-model='nickname' autocomplete='off' /><button><span>Send</span></button></form><p class='error' ng-show='error != null'>{{error}}</p></section>",
            controller: function($scope, $state) {
                $scope.error = null;
                $scope.nickname = null;

                $scope.login = function(form) {
                    var value = $scope.nickname.replace(/[^a-zA-Z0-9]/g, '');
                    if (value.length >= 3) {
                        $state.go('platform.channels');
                    } else {
                        $scope.error = 'only characters and numbers. length must be >= 3';
                    }
                }
            }
        });
});

myApp.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider.state('platform.channels', {
        url: "/channels",
        template: "<section id='channels' class='channels'>channels</section>",
        controller: function($state) {
            console.log('channelController');
            console.log('goes to platform.game');
            $state.go('platform.game', {
                type: 'gameType',
                id: 1
            });
        }
    })
});

myApp.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('platform.game', {
            url: "/game/:type/:id",
            template: "<section id='game' class='game'>game</section>",
            controller: function() {
                console.log('gameController');
            }
        });
});


angular.bootstrap(document, ['myApp']);
</script>

不工作:

<div ui-view></div>
<script>


var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise("/signin");

        $stateProvider
            .state('platform', {
                url: '/platform',
                data: {
                    permissions: ['auth']
                },
                template: "<section class='platform'>platform<div ui-view></div></section>",
                controller: function($state) {
                    console.log('platformController');
                }
            });
});

myApp.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('signin', {
            url: "/signin",
            template: "<section id='connect' class='connect'><form name='connection' action='' ng-submit='login(connection)'><input placeholder='Choose a nickname' ng-model='nickname' autocomplete='off' /><button><span>Send</span></button></form><p class='error' ng-show='error != null'>{{error}}</p></section>",
            controller: function($scope, $state) {
                $scope.error = null;
                $scope.nickname = null;

                $scope.login = function(form) {
                    var value = $scope.nickname.replace(/[^a-zA-Z0-9]/g, '');
                    if (value.length >= 3) {
                        $state.go('platform.channels');
                    } else {
                        $scope.error = 'only characters and numbers. length must be >= 3';
                    }
                }
            }
        });
});

myApp.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider.state('platform.channels', {
        url: "/channels",
        template: "<section id='channels' class='channels'>channels</section>",
        controller: function($state) {
            console.log('channelController');
            setTimeout(function () {
                console.log('should go to platform.game');
                $state.go('platform.game', {
                    type: 'gameType',
                    id: 1
                });
            }, 1000);
        }
    })
});

myApp.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('platform.game', {
            url: "/game/:type/:id",
            template: "<section id='game' class='game'>game</section>",
            controller: function() {
                console.log('gameController');
            }
        });
});


angular.bootstrap(document, ['myApp']);
</script>

$state.go 在 setTimeout 中不起作用的任何原因？

Answer 1

你的演示不工作的原因是超时，当你改变 Angular 知识时很简单， Angular 保持不知道正在发生的变化，因此它不会更新。

解决方案是使用 Angular 方式来执行此操作。 angular 提供了$timeout服务。

在这里阅读更多相关信息:https://docs.angularjs.org/api/ng/service/ $超时

工作(在此处修复异步演示):http://jsfiddle.net/f9rSQ/2/

PS 你应该总是使用 angular 的方式或 ng-* 指令来处理异步变化，比如按钮点击事件监听器如果你通过纯 javascript 来处理它们就不会触发。为了让它们开火，你可以强制 Angular 运行一个 $digest 循环，当你使用 ng-click , $http等