Question

我有一个相当简单的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现在毫无价值，因为没有什么是真正持久的。使用Lawnchair的适配器时，我需要做些什么来改变视图？

Answer 1

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

示例：

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。

如何在Angular JS中异步更改视图（来自Lawnchair JS）？

1 个答案: