如何在 Angular JS 中异步更改视图(来自 Lawnchair JS)

我有一个相当简单的2页网络应用程序，使用Angular和Lawnchair。我有一个登录页面，在用户经过身份验证并提取相关数据之前，我不想允许屏幕/视图更改。此外，这是一个移动应用程序，因此用户可能只需要重新进行身份验证并从浏览器加载其数据。

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" ng:app="AppMod">
<head>
...
</head>
<body ng:controller="AppCtrl">
    <ng:view></ng:view>
    ...
</body>
</html>

当我在没有适配器的情况下使用Lawnchair时，Angular可以很好地更改视图，Lawnchair将数据保存在浏览器中，但不会像WebSQL或IndexedDB那样永久保存。但是，一旦包含一个或多个 Lawnchair 适配器，最坏的情况是视图将不会显示，或者充其量它会在不更改视图的情况下更新位置/URI（直到发出另一个事件（如"更改"）。

$scope['login'] = function()
{
    AuthSvc.query(
        {'username':$scope['username'], 'password':$scope['password']},
        function( results )
        {
            LastUsedRsc.save({'key':'credentials', 'value':
                {'username':$scope['username'], 'password':$scope['password']}});
            $location.path( '/dataset' );
        },
        function( error )
        {
            alert( "Incorrect username and/or password." );
        });
    return( false );
};

我已经尝试了$scope.$apply（），$scope.$digest（），它们各自的"安全"包装器等。这是一个JSFiddle供您查看。如果删除"管理资源"下的 Lawnchair 适配器并再次运行小提琴，您将看到视图将开始工作，但 Lawnchair 现在毫无价值，因为没有真正持久化的内容。在使用草坪椅的适配器之一时，我需要什么才能更改视图？

在解决LoginResolver和DatasetResolver的承诺后，您确实需要运行$digest或$apply。

例：

var LoginResolver = {
    'credentialsAsync':function( $rootScope, $q, $route, LastUsedRsc ) {
        var deferred = $q.defer();
        LastUsedRsc.get( 'credentials', function( object ) {
            deferred.resolve( object );
            $rootScope.$digest();
        },
        function( error ) {
            window.console.info( "Using default, default value.", error );            
            deferred.resolve({'value':{}});      
            $rootScope.$digest();
        });
    return( deferred.promise );
    },
};

注意：您需要注入$rootScope并在解决/拒绝后呼叫$digest。

相关内容

最新更新

热门标签：