AngularJS承诺通话后显示一个应用程序的不同状态

我有一个问题：想象一下，我们有一个应用程序AngularJS承诺通话后显示一个应用程序的不同状态

对话框创建团队竞争与实际的按钮
实际形式两种状态用于创建一个包含所有投入和东西的团队。

应用程序的检查，使用工厂承诺，如果用户已经创建了一个团队，并抛出一个“编辑屏幕”，而不是创建按钮。

我用NG-隐藏和NG-显示与开关状态一个$范围VAR成功的承诺后，被分配。它工作正常，但我的“创建新的团队”闪光的承诺之前，屏幕上得到解决。这当然不是好。

<div class="teamtable"> 

<div ng-show="teamAdded"> 
    <input type="text" name="teamname"/> 
    <input type="text" name="playername"/> 
    <button ng-click="saveTeam()">Save</button> 
</div> 
<div ng-hide="teamAdded"> 
    <div class="team__hint"> 
     Create your team 
     <button id="button" ng-click="createTeam()">Create team</button> 
    </div> 
</div> 
</div>

teamAdded成功的承诺后，将真。

那么，我该如何进行检查或等待承诺解决或使用条件或其他方法一次只显示一个屏幕？谢谢

来源

2016-03-02 Alex Kungfu

可以提供更多的代码？甚至是样品plunkr？ – Grundy

@Grundy，是的，当然 –

你使用的是路由器吗？如果是这样，你可以添加一个解析参数到你的状态，ui-router会在显示任何东西之前等待解析完成。 ngRoute也是如此。 – Walfrat

您可以创建加载标志来指示数据是否加载。

在控制器：

.... 
$scope.isLoaded = false; 
yourResource.fetchData().then(function() { 
    $scope.isLoaded = true; 
    //Do some stuff 
}

而且在模板你可以换你所有的东西

<div ng-if="isLoaded ">...</div>

，创造另类的div：

<div ng-if="!isLoaded ">Loading....</div>

来源

2016-03-02 07:46:02

我会试试这个并回复给你！谢谢！ –

感谢您的时间！这不是我正在寻找的，因为这样的方式应用程序的第二个状态只是一个临时加载屏幕，但我需要一个实际的工作UI取决于承诺结果。看起来它更像是一个UI路线的工作，但是谢谢你的时间！ –

但是在你的情况下，显示的视图取决于promise结果，所以在promise解决之前显示一些实际视图是不好的主意。无论如何，欢迎您:) –

你可以隐藏这两个，直到你知道哪一个显示。

<div class="teamtable"> 

<div ng-if="showCreateMask"> 
    <input type="text" name="teamname"/> 
    <input type="text" name="playername"/> 
    <button ng-click="saveTeam()">Save</button> 
</div> 
<div ng-if="showEditMask"> 
    <div class="team__hint"> 
     Create your team 
     <button id="button" ng-click="createTeam()">Create team</button> 
    </div> 
</div> 
</div>

在你的JS，你可以这样做：

showCreateMask = false; 
showEditMask = false; 

promise.success(function(teamAdded) { 
    showCreateMask = !teamAdded; 
    showEditMask = teamAdded; 
});

这样它会显示相应的面具时的承诺已经完成。在此之前，它什么都不会显示。

Regards

来源

2016-03-02 07:44:00 Julian

我会尝试这个并回应给你！谢谢！ –

您的解决方案正在回答我的问题，谢谢！但随着我进一步调查，我明白我需要看看路由的事情。谢谢！ –

@Keeprock - 当你看看路由时：我建议你看一下https://github.com/angular-ui/ui-router，因为angular的标准路由功能没有那么强大。希望这可以帮助你防止可能遇到的一些麻烦。 – Julian

AngularJS承诺通话后显示一个应用程序的不同状态

回答

相关问题